how does the css "onmouseover" event work?

Question

update- sorry folks, i should have provided the link to the website where i saw the effect. here you go - http://www.w3schools.com/Css/css_image_transparency.asp

and the code that i saw there (and the basis of this question) is as below -

    <img src="klematis.jpg" style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />

The original question is as below -

I was looking for rollover effects that can be done without using JS, and i stumbled upon the w3schools website teaching the opacity setting for images. In the code, there is no js involved, its just pure css.

i even tried using the same code into my webpage (which does not have any js, yet) and i noticed that the code happened to work perfectly in both chrome and IE 7.0. the code has a "onmouseover" event and another "onmouseout" event to give the hover effects based on the opacity settings.

wondering whether these effects (onmouseover and onmouseout) are - 1. pure css 2. standards compliant (xhtml 1+ and css2) 3. whether there are any hacks involved

i still cant believe these things worked on ie7, and wondering why there are no documentation on these events.

Rich Adams · Accepted Answer · 2011-05-10T17:13:53.277

There's no such "onmouseover" event or attribute in CSS, that's JavaScript. CSS uses the ":hover" pseudo-class for mouse over events. A quick example,

HTML:

<div id="someid">I'm a random div.</div>

CSS:

#someid {
    background: #fff;
}

#someid:hover {
    background: #000;
}

In this example, when you hover over the #someid element, it's background will change from white to black.

This is the correct way to handle mouse over events in CSS. It is standards compliant and will work in all modern browsers (and some older browsers too).

Sidenote: It won't always work in IE6, IE6 only recognizes the ":hover" pseudo-class when it's applied to anchor tags ("a:hover", etc).

Based on the update to your question:

<img src="klematis.jpg" style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />

That is using JavaScript to change the style. The only bit of this which is CSS is the style='...' part. The text in onmouseover and onmouseout is JavaScript.

To do what you want in pure CSS, it should be like this,

<html>
<head>
    <style>
    img.opacity-image {
        opacity: 0.4;
        filter:alpha(opacity=40); /* This is IE specific and NOT standards complaint */
    }

    img.opacity-image:hover {
        opacity: 1;
        filter:alpha(opacity=100); /* Again, 'filter:' is IE specific. */
    }
    </style>
</head>
<body>
    ...
    <img src="klematis.jpg" class="opacity-image" />
    ....
</body>
</html>

opacity is CSS3 and only supported by modern browsers (IE6,7,8 don't support it). You can use filter:... to get opacity to work in IE (although it won't handle PNGs correctly, but since you're using JPG that's not an issue), but then your code isn't technically standards compliant as "filter" is not in the CSS standard. That doesn't generally matter too much though since it'll still render correctly in any modern browser.

I really can't stand the fact that one of my Analytics shows 15% IE users are IE6 users.......... — Atticus, May 10 '11 at 16:27
Thanks, Rich. That was exactly what I was looking for. One last question - You mentioned that the onmouseover and onmouseout are javascript events and not related to css at all. well, i tried this bit of code on my webpage which does not have javascript mentioned anywhere (no script tags at all). in this case, did the browser (ie7) automatically recognize it as a javascript code? — arun nair, May 10 '11 at 17:26
@arun Yes, the browser will recognize onmouseover/out as JavaScript event tags and automatically know the code inside is JavaScript. You don't necessarily need a script tag on the page for JavaScript to be there. You can test this by disabling JavaScript in your browser and then see that the hover effect will stop working. — Rich Adams, May 10 '11 at 17:29

score 2 · Answer 2 · answered May 10 '11 at 15:58

I'm assuming you're talking about the :hover event?

<div id="hoverDiv"> Something should happen when you hover on me</div>

Style:

#hoverDiv:hover{ background-color:red; }

Visual example: http://jsfiddle.net/zRnug/

All hover effects you want to add to your stylesheet within the #selector:hover{ } area.

All effects you want to pertain before (the default style of the element), just use within the #selector{ } area.

score 1 · Answer 3 · answered May 10 '11 at 15:58

1

Those are Javascript inline event handlers.

You can do this in pure CSS using the :hover selector.

answered May 10 '11 at 15:58

SLaks

868,454
176
1,908
1,964

score 1 · Answer 4 · answered May 10 '11 at 16:01

CSS supports the :hover selector, which is triggered when you move the mouse over the item.

.mydiv {background-color:red;}
.mydiv:hover {background-color:blue;}

Any CSS property can be set to change on mouse-over using the :hover selector in this way.

Opacity is a CSS3 feature. It is supported by most browsers, but IE8 and lower don't support it. They do have an alternative way of doing it (using the IE-specific filter property); it's more fiddly than standard CSS and harder to get right, but it can be done.

Be aware that IE6 and lower only supports :hover on <a> elements. Other browsers (including IE7 and up) support it for all elements. My advice would be just not to support IE6 on your site, but if you do need to, there are hacks for it which can make :hover work correctly.

how does the css "onmouseover" event work?

4 Answers4

Linked