Given a DIV, how does one create a change in the behavior when the mouse moves into the region and out of it? That was an interesting excercise on one of my websites this week as I searched for a solution to change the background color in a DIV. Here I explain how I solved this problem.
A natural solution uses CSS by use of the hover attribute on a DIV tag:
<div class="mybox">
<p>This is some text that is just dummy filler.</p>
</div>
div:hover {
background-color:red;
}However, the above won't work under Internet Explorer 6. So until IE 6 goes out of mainstream we have to work around it. Now after reading some of the Javascript solutions after Googling, I found some of them didn't even work.
Eventually I came up with a simple solution:
<script type="text/javascript">
function ChangeBackground(e, color) {
e.style.background = color;
}
</script>
<div onmouseover="ChangeBackground(this, '#ff0000')" onmouseout="ChangeBackground(this, '#efefef')"
>
<p>This is some text that is just dummy filler.</p>
</div>The disadvantage to using this approach is that the link colors are hard coded into my PHP scripts, separate from my CSS stylesheets. There is no way around this situation unless you write a bunch of code to parse out the color and then substitute it on the fly - just not worth the effort.
- SiteAdmin's blog
- Login or register to post comments
Del.icio.us
Digg
Technorati