when mouse is over – hover

Hover is active when your mouse is placed over the element.

According to W3C standard, hover is for every element.

CSS

style{ no mouse over }

style:hover{ when mouse over }

The style will change accordingly to make an really useful effect

which can distinguish what you are clicking.

This is almost used on every website nowadays.

but again, IE sucks, IE only support hover for <a> element.

We need to use Javascript to do that effect instead

which I consider as a hack.

Not a good thing to do but life is like that, what you gonna do.

Complete example:

Standard style

CSS:

div.trans {width: 100%; background-color: silver;border:1px solid black; }

div.trans:hover{width: 100%; background-color: silver;opacity:.50;filter: alpha(opacity=50); -moz-opacity: 0.5;border:1px solid black;}

HTML:

<div class="trans"><p style="padding:5px;width:75%;">Hover here. The works in Mozilla and  Opera.</p></div>

IE compatible style

CSS:

div.transOFF {width: 100%; background-color: silver;border:1px solid black; }

div.transON {width: 100%; background-color: silver;opacity:.50;filter: alpha(opacity=50); -moz-opacity: 0.5;border:1px solid black; }

HTML:

<div class="transOFF" onmouseover="this.className='transON'" onmouseout="this.className='transOFF'"><p style="padding:5px;width:75%;">Hover here. The Filter Opacity works in Mozilla and IE.  It also works in current versions of Opera.</p></div>

REMARK: use this carefully, mixing with different size and z-index will make hover act nasty.

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s