Toggle CSS hover element using Javascript button

Question

Is it possible to use Javascript to switch an element that changes on hover. I would like to create a button that allows the div to change from two different states: (1) when the div does not hang and (2) when the div hangs.

Any suggestions on how to do this?

Thank!

Tf

Answer 1

Of course, this can only be done using CSS:

div { background-color:#000; }
div:hover { background-color:#cc0000; }

When you hover over the divbackground color will turn from black to red.

I believe that using javascript for this task is redundant. You can do quite complex things with a pseudo-selector :hover. 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; }

, :hover , , , . , "" ul s.

Answer 2

, !

- :

JQuery

$("#mydiv").hover(function () 
{
    $(this).toggleClass("active");
    // or $(this).toggle();
  }
);

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>

Answer 3

<input type = 'button' value = 'change div' onmouseover = 'javascript:getElementById('DivId').className = newStyleClass' onmouseout = 'javascript:getElementById('DivId').className = newStyleClass' />

Answer 4

you can try using jQuery, it will simplify. $ ('# divId'). css ('hover', function (index) {whatever;});

If you prefer that let me know and I can scratch my brain how to do it right in js.