: парить с < span > элементы

Question

Я работаю с:

#top ul li.corner span.right-corner:hover
{
    background-image:url("images/corner-right-over.gif");
    width:4px;
    height:15px;
    float:left;
}

#top ul li.corner span.left-corner:hover
{
    background-image:url("images/corner-left-over.gif");
    float:left;
    width:4px;
    height:15px;
}

И я не могу заставить работать : hover правильно? Не уверен, почему, у кого-нибудь есть предложения?

Answer 1

Я считаю, что проблема заключается в том, что элементы SPAN по умолчанию отображаются встроенными, то есть не имеют высоты и ширины. Попробуйте явно сделать их элементами уровня блока, добавив:

#top ul li.corner span.right-corner, #top ul li.corner span.left-corner
{
    display: block;
}

Answer 2

Напишите <! DOCTYPE html > в первой строке вашего HTML-документа. Поддержка наведения должна быть включена для всех типов элементов.

Answer 3

Как отметил комментатор, "top" не является действительным селектором. Это должно быть " # top " или " .top "

Answer 4

Вы тестируете в IE? IE7 и ниже поддерживают только : hover для < a > (не уверен насчет IE8)