Как я могу добавить класс hover к элементу?

В моем CSS у меня есть:

li.sort:hover {color: #F00;}

Все мои элементы LI в классе sort функционируют правильно, когда DOM готов.

Если я создаю новый элемент LI (используя mootools el.addClass(classname)), я могу установить базовый класс, но не могу понять, как добавить к нему класс hover.

Есть идеи?


javascript ajax mootools
person dengel    schedule 03.05.2009    source источник
comment
MyClass:hover не работает с новыми элементами, похоже, что все браузеры просто не учитывают такой псевдокласс для вновь вставленных элементов DOM. Мне пришлось обойти эту проблему путем добавления нового обработчика событий для событий mouseover и mouseleave и добавления/удаления обычного класса MyHover к элементу. Не идеально, но работает.   -  person dengel    schedule 06.05.2009

Ответы (5)


arrow_upward
7
arrow_downward

Псевдокласс hover можно определить заранее в таблице стилей на основе имени класса, которое вы указываете. Такие как:

li.classname:hover {color:#F000;}

Таким образом, он определяется таким же образом, через таблицу стилей. Вы бы просто планировали заранее, зная, что вы будете определять имя класса в тегах LI, сгенерированных JS, с определенным классом и стилем для него, несмотря на то, что элементы списка не существуют, пока вы не создадите их с помощью JavaScript.

person user100282    schedule 03.05.2009

arrow_upward
4
arrow_downward

Класс наведения добавляется автоматически, когда вы добавляете класс без наведения. Например. если у тебя есть

.MyClass
{
...
}

.MyClass:hover
{
...
}

просто добавьте MyClass, и MyClass:hover будет работать.

person Kamarey    schedule 03.05.2009
comment
Имена классов и идентификаторов не могут начинаться с заглавной буквы. - person Wolfr; 03.05.2009
comment
Имена и атрибуты тегов XML должны быть строчными, но я никогда не слышал, что идентификаторы и имена классов нельзя писать с большой буквы? Это из какой спецификации? - person Calvin; 03.05.2009
comment
Классы и идентификаторы могут начинаться с заглавных букв. w3.org/TR/html4/struct/global. html#h-7.5.2 - person Quentin; 03.05.2009

arrow_upward
2
arrow_downward

:hover — это не класс, а псевдоселектор, который будет выбирать любые элементы, над которыми в данный момент находится указатель мыши. Если вы создаете элемент li и добавляете к нему класс sort, то всякий раз, когда вы наводите указатель мыши на элемент, правило li.sort:hover должно активироваться, если браузер работает правильно.

person Brian Campbell    schedule 03.05.2009

arrow_upward
0
arrow_downward

Не все браузеры будут принимать псевдокласс hover для всех элементов. Вы должны рассмотреть возможность использования javascript для этого эффекта. jQuery, например, делает это очень просто.

person majestiq    schedule 03.05.2009

arrow_upward
0
arrow_downward

Не все браузеры будут принимать псевдокласс hover для всех элементов. Вы должны рассмотреть возможность использования javascript для этого эффекта. jQuery, например, делает это очень просто.

Чтобы быть более конкретным, IE6 подбирает стили :hover только для элементов привязки (a).

person Wolfr    schedule 03.05.2009