Temporary Onmouseover

Question

Css "hover" selector applys a temporary style to an element, but it isn't definitive:

div:hover {
 background-color: red;
}

I can do the same thing with javascript but it is a bit complicate and impossible for several 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 this:

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

Thanks

Function `getElementByTagName` does not exist. There is only `getElementsByTagName`. It must be a reason of the issue you have. — MiKo, May 16 '10 at 15:45
Further to my previous comment, my gut says you are trying to use JavaScript to hack around a lack of understanding of the cascade: http://www.w3.org/TR/CSS21/cascade.html#specificity — Quentin, May 16 '10 at 15:54

score 2 · Answer 1 · answered May 16 '10 at 15:50

No, there is no way to apply styles that go away by themselves.

Eventhough the CSS contains only one definition, it actually corresponds to the two state changes that triggers onmouseover and onmouseout. When the pointer enters the element, the :hover pseudo class is added to it making the CSS rule apply. When the pointer leaves the element, the :hover pseudo class is removed making the CSS rule no longer apply.

score 1 · Answer 2 · answered May 16 '10 at 15:39

1

In JavaScript this behaviour can only be handled by listening to the mouseover and mouseout DOM events, as you did in your second example. However it is recommended to handle hovering styles with CSS, as in your first example.

answered May 16 '10 at 15:39

Daniel Vassallo

337,827
72
505
443

You can use the Javascript to set (and unset) a "hover" class, and then apply styles with CSS. – Pointy May 16 '10 at 15:50
@Pointy: True... I meant "apart from that..." :) – Daniel Vassallo May 16 '10 at 16:01

james_womack · Answer 3 · 2010-05-16T17:39:38.310

0

I believe that if you use the jQuery JavaScript framework, you can do this:

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

edited May 16 '10 at 17:39

answered May 16 '10 at 15:50

james_womack

10,028
6
55
74

No, that sets the background colour to 'red' onmouseover and onmouseout. – Quentin May 16 '10 at 15:52

score 0 · Accepted Answer · answered May 16 '10 at 16:06

// jQuery 'Temporary mouseevents'

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

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

I hope this is a good approach for what you need.

Temporary Onmouseover

4 Answers4