Applying CSS3 'Opacity' Property

Question

I'm working on a site where I've created a simple CSS3 hover effect, where if a link is hovered, it changes the opacity and looks like a rollover effect. It seems to be working perfectly on all browsers (even older ones, such as Firefox 2). Just wanted some input if this is a problem and I should consider javascript instead? Or is using CSS a good (semantically correct) way of going about a rollover?

Answer 1

Generally, if an effect can be achieved using CSS alone, it's usually better to use CSS then to use JavaScript to achieve it.

Sure, you can use JavaScript and/or libraries like jQuery, but why? If the browser is capable of doing it natively, not only will it work better, it will look better and smoother.

Answer 2

Generally, people using newer browsers get benefits from the new technology.

People who do not update their systems tend to not care about how things look, so as long as the site is functional and the effect is not very important, I'd say don't bother to make all browsers behave exactly the same. It's a waste of time and effort.

Answer 3

For anchor elements, the :hover pseudo-class is widely supported, and is a good way to go. I believe the only in-use browser that doesn't support it is IE 6. The opacity property is less widely supported, so your effect may not look the way you want in some browsers. If you need to use the :hover pseudoclass on elements other than a , I think you'll lose IE 7 as well.

See http://www.w3schools.com/css/css_pseudo_classes.asp for some background information on :hover and other pseudo-classes.