Временный Onmouseover

Question

Css "hover" селектор применяет временный стиль к элементу, он не является окончательным:

div:hover {
 background-color: red;
}

Я могу сделать то же самое с javascript, но это несколько сложно и невозможно для нескольких элементов:

var elem = document.getElementsByTagName ("div")[0];

elem.onmouseover = function () {
 this.style.backgroundColor = "red";
}

elem.onmouseout = function () {
 this.style.backgroundColor = "transparent";
}

Есть ли лучший способ? Примерно так:

document.getElementsByTagName ("div")[0].ontemporarymouseover = function () { // LoL
 this.style.backgroundColor = "red";
}

Спасибо

Answer 1

Нет, невозможно применить стили, которые исчезают сами по себе.

Несмотря на то, что CSS содержит только одно определение, оно фактически соответствует двум изменениям состояния, которые вызывают onmouseover и onmouseout.Когда указатель входит в элемент, к нему добавляется псевдокласс :hover, применяя правило CSS.Когда указатель покидает элемент, псевдокласс :hover удаляется, в результате чего правило CSS больше не применяется.

Answer 2

В JavaScript это поведение может быть обработано только путем прослушивания событий mouseover и mouseout DOM , как вы это делали во втором примере. Однако рекомендуется обрабатывать стили зависания с помощью CSS, как в первом примере.

Answer 3

// jQuery 'Временные мышиные события'

$("element").bind
({
    mouseover:
        function ()
        {
        },
    mouseout:
        function ()
        {
        }
});

$("element").unbind('mouseover mouseout');

Надеюсь, это хороший подход для того, что вам нужно.

Answer 4

Я считаю, что если вы используете JavaScript-фреймворк jQuery, вы можете сделать это:

$('div:first').hover(function(){
   $(this).css('background-color','red');
},function(){
   $(this).css('background-color','white');
});