لا تعمل الرسوم المتحركة CSS في IE عند استخدام: Hover و: Hover: الحروف الأولى

Question

أحاول تغيير لون الحرف الأول وتحريك نص مع CSS. في Chrome و Safari ، يعمل بشكل صحيح ولكن في Internet Explorer 10 و 11 لا يمكنني جعلها تعمل. هنا رمز CSS الخاص بي:

.amy:before {
    content:"Amy";
}
.amy {
    display: block;
    width:50px;
    height:30px;
    color:#c63b2c;
    font-size:24px;
}
.amy:hover {        
    display: block;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: wobble;
    -moz-animation-duration: 2s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-name: wobble;
    -o-animation-duration: 2s;
    -o-animation-iteration-count: infinite;
    -o-animation-name: wobble;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-name: wobble; 
}
.amy:hover:first-letter {
    color:black;
}

إذا كان هناك رقم: العنصر الزائفة من الحروف الأولى ، تعمل الرسوم المتحركة في مثل السحر.

Answer 1

لست متأكدًا لماذا يفعل هذا. كلما أضفت خاصية إلى :first-letter فئة PSUEDO ، لن تعمل الرسوم المتحركة بعد الآن.

ال :first-letter يبدو أن فئة PSUEDO تلغي التحويم السابق.

JSfiddle

كما ترون متى كانت فئة PSUEDO نشطة ، فسيقوم بإلغاء أي سابق: تحوم (الانتقال في هذه الحالة).

لذا في حالتك ، لا أقوم حتى بتنفيذ الرسوم المتحركة الخاصة بك

لا أفعل لماذا يحدث هذا ، يبدو وكأنه خطأ جديد من الكبير السابق:

:first-letter لا تعمل فئة PSUEDO عندما يتبعها فئة أو فئة زائفة (على سبيل المثال DIV: الحرفي الأول: Hover).
يبدو أنه هو العكس الآن؟

النظرية هي أنه عندما يكون هناك فئة زائفة قبل :first-letter لن ينجح. قد يكون ذلك أ :hover لا يُنظر إلى الفئة الزائفة على أنها "محتوى تم إنشاؤه".

عندما يتم تطبيق العناصر الزائفة من الخط الأول و: الخط الأول على عنصر يحتوي على محتوى تم إنشاؤه باستخدام: قبل و: بعد ، يطبقون على الحرف الأول أو الخط من العنصر بما في ذلك المحتوى الذي تم إنشاؤه.

مصدر : http://www.w3.org/tr/css2/selector.html#before-and-after

بهذه الطريقة :hover لا يتم عرضه.

---

نظرت إلى العديد من الوثائق ولم أتمكن من العثور على أي من آخر العلاقة بين الرسوم المتحركة ، وإطارات المفاتيح ، والمعلومات ، والفئة PSUEDO الحاملة الأولى. الظلم بين فئة Puedo من فئة Puedo وفئة Psuedo الأولى التي قد لا تتفاعل مع بعضها البعض في IE.

---

TL ؛ د

من المرجح أن يكون خطأ.
لك :first-letter فئة psuedo لا تعمل مع :hover فئة psuedo من العنصر الأصل. ال :hover فئة psuedo التي لن يتم عرضها ، وبالتالي لم يتم تحميل الرسوم المتحركة الخاصة بك.

العمل حولها

يمكنك فقط وضع المحتوى مباشرة في HTML الخاص بك ولف الحرف الأول في فترة:

<div style="width:160px;height:300px;float:right;">
    <a href="kapcsolat.html" class="animated menu5">
        <span>K</span>apcsolat
    </a>
</div>

حيث تضيف نمطًا عندما يتم تحوم المرساة:

.menu5:hover > span
{
   color: black;
}

JSfiddle

Answer 2

ما هو إصدار IE الذي تختبره؟ يجب أن تعمل في IE 10 و 11 ، ولكن الإصدارات السابقة لا تدعم استخدام الرسوم المتحركة CSS3. إلق نظرة http://caniuse.com/css-animation

Answer 3

إذا كنت تختبر في الإصدار 9 أو أكبر ، فلن تظهر أي شيء

يمكنك وضع متصفحك في IE 10 أو أعلى مع F12 زر ثم حدد Browsermode IE10 أو IE11