Temporary Onmouseover

Question

The Css "hover" selector applies a temporary style to the element, it is not final:

div:hover {
 background-color: red;
}

I can do the same with javascript, but it is a bit complicated and impossible for a few elements:

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

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

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

Is there a better way? Something like that:

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

thank

Answer 1

// jQuery "Temporary mouse events"

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

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

Hope this is a good approach to what you need.

Answer 2

No, there is no way to apply styles that go away on their own.

CSS , , onmouseover onmouseout. , class :hover, CSS. , :hover , CSS .

Answer 3

JavaScript mouseover mouseout DOM, . CSS, .

Answer 4

, jQuery JavaScript framework, :

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