0

I'm working with a platform that does not support onmouseover or onmouseout. I need to change the innerHTML of another element using JavaScript. I thought I could probably do this with :hover, but if there is a better CSS/HTML method, I'll go for it. How would I correlate JavaScript and CSS to get this to work?

Basically,

<div id="trigger">To hover over</div>
<div id="dynamicContent">To change innerHTML of</div>

Any suggestions on how this might get done using the template above? Thanks!

zdebruine
  • 3,687
  • 6
  • 31
  • 50
  • Why doesn't it support onmouseover or onmouseout? And what have you tried? – PitaJ Jun 08 '12 at 02:18
  • onmouseover and onmouseout are javascript events which aren't supported by early versions of Google Gadget APIs, so I don't want to use them--that's what I'm developing in. – zdebruine Jun 08 '12 at 02:21

1 Answers1

3
document.querySelector("#trigger").addEventListener("mouseover", function(){
    var txt = document.querySelector("#dynamicContent").innerHTML;
    document.querySelector("#dynamicContent").innerHTML = "Changed.";

    this.addEventListener("mouseout", function(){
        document.querySelector("#dynamicContent").innerHTML = txt;
    });
});

:)

Derek 朕會功夫
  • 92,235
  • 44
  • 185
  • 247
  • The question says that the platform does not support `onmouseover` or `onmouseout`. –  Jun 08 '12 at 02:25
  • @dunsmoreb - He is making that Google Gadget thing. (Not sure) – Derek 朕會功夫 Jun 08 '12 at 02:26
  • thing. Yes, this was building off the previous question. You are NOT stupid :D As you can see, I'm on line 976 of 10,247 of version 4.1 and am just stuck (but almost there)! – zdebruine Jun 08 '12 at 02:27
  • 1
    Note that [`querySelector`](https://developer.mozilla.org/En/DOM/Document.querySelector) is only supported in IE8+, nevertheless +1 for the jQuery-translated code. – Fabrício Matté Jun 08 '12 at 02:29