Is it possible to use Javascript to toggle an element which changes on hover. I would like to build a button which allows the div to change from the two different states: (1) when the div is not hovered and (2) when the div is hovered.
Any suggestions how this could be done?
Thanks!
TC
It is certainly possible to do this with CSS alone:
div { background-color:#000; }
div:hover { background-color:#cc0000; }
When you hover over the div the background color will turn from black to red.
It is my opinion that using javascript for this task is overkill. You can do some pretty sophisticated things with the :hover pseudo selector. Consider this markup (and CSS):
<div>I'm just a div <h1>I'm just an h1</h1></div>
div h1 { font-size:10px; font-weight:normal; }
div:hover { border:1px dotted #000; }
div:hover h1 { font-size:32px; font-weight:bold; color:#cc0000; }
As you can see, we can use the :hover selector in a rule like above to not only style the hovered element, but any children elements as well. This premise is how a lot of 'fly out' navigation is made with little more than nested uls.
:hover on anything but a tags by default. If IE 6 support is required, look at code.google.com/p/ie7-js. This script will enable the use of :hover on any element (among many other things).
:hover compatibility. All other browsers support the technique I illustrated above.:active pseudo selector, :hover is fully supported (as it says on the link I provided)You sure can!
You could do something like:
jQuery:
$("#mydiv").hover(function ()
{
$(this).toggleClass("active");
// or $(this).toggle();
}
);
Standard javascript:
function toggle(obj)
{
var item = document.getElementById(obj);
if(item.style.visibility == 'visible') { item.style.visibility = 'hidden'; }
else { item.style.visibility = 'visible'; }
}
HTML:
<div onmouseover="toggle('mydiv');" onmouseout="toggle('mydiv');" id="mydiv">Hover</div>
<input type = 'button' value = 'change div' onmouseover = 'javascript:getElementById('DivId').className = newStyleClass' onmouseout = 'javascript:getElementById('DivId').className = newStyleClass' />
you can try using jQuery it will make it much easier. $('#divId').css('hover', function(index){ whatever ; });
If you dont prefer that let me know and I can scratch my brain on how to do it in straight js.
