Many webdevelopers/webdesigners found a problem in IE 6: he doens’t read the hover css pseudo-class in tags like DIV and IMG.
The solution? jQuery.
What you will need
- Browser (Firefox, Chrome, Safari, Internet Explorer )
- Lastest jQuery lib.
- Text editor. (author’s choice)
The XHTML code
In this tutorial I’ll use this simple and valid XHTML and CSS. (you can download all these files in the end of this tutorial)
index.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="overeffect.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#link").overEffect('border-color','#99CC00');
});
</script>
<title>HOWTO #2 - Over(hover) effect in DIV, IMG or any other tag in IE</title>
</head>
<body>
<div id="link">
<p>
Move your mouse in this square
to see the over effect.
</p>
</div>
</body>
</html>
style.css
*
{
padding: 0;
margin: 0;
border: 0;
font-family: Trebuchet MS, Arial, sans-serif;
font-size: 12px;
}
#link
{
width: 300px;
height: 120px;
background: #F5F5F5;
position: absolute;
left: 50%;
top: 50%;
margin: -60px 0 0 -150px;
padding: 10px;
text-align: center;
border: 3px solid #777777;
cursor: pointer;
}
#link p
{
width: 250px;
height: 40px;
position: absolute;
top: 50%;
left: 50%;
margin: -20px 0 0 -125px;
}
The Javascript/jQuery code
Now, let’s do the funny part. :P
We can simulate this hover effect using the hover jQuery function. See the function below:
$(document).ready(function(){
jQuery.fn.overEffect = function(attr,over_val)
{
var normal_val = $(this).css(attr);
$(this).hover(function(){
$(this).css(attr,over_val);
},function(){
$(this).css(attr,normal_val);
});
}
});
Pretty easy ahn?
That’s it, the magic happens when we call the function, like we did in the XHTML file:
<script type="text/javascript">
$(document).ready(function(){
$("#link").overEffect('border-color','#99CC00');
});
</script>
This is the function sintax:
overEffect(Attribute,Value);
Attribute: CSS attribute. (for example: ‘background-color’)
Value: attribute value. (for example: ‘#FF0022′)
That’s all! Did you expected more? :)
You can see the result of this tutorial here and download the source here.
See you in the next howto. :)
Nice tutorial Estevao this will help me a lot, thanks
Thanks Hugo. ;)