Search code examples
javascriptcssdhtml

Get innerHTML of another element on :hover using JavaScript

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!

Solution 
  • 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;
    });
});

    :)