Mouseover Javascript

Matthieu Published at Dev

Matthieu

I have this HTML :

<div class="firstScene">
    <div class="text"> <div class="welcomeMessage">iPhone X</div> </div>
    <div class="pictures">
        <img src="assets/img/iphoneX_off.png" alt="iphone X" id="iphoneX">
        <img src="assets/img/iphoneX_screen.png" alt="screen on" id="iphoneScreen">
    </div>
</div>

and this javascript :

function initHover () {
  var screen = document.getElementsById("iphoneScreen")

  screen.onmouseover = mouseOver
  screen.onmouseout = mouseOut
}


function mouseOver() {
  var welcomeMessage = document.getElementsByClassName("welcomeMessage")
  welcomeMessage.className += "screenOn"
}

I want to add the class "screenOn" on the div with the class "welcomeMessage" but it doesn't work. May someone help me ?

PS : I don't have the right to use jQuery...

Krusader

I've fixed your js code so try to use it know, should work

JS:

function initHover () {
  var screen = document.getElementById("iphoneScreen");

   screen.onmouseover = mouseOver
   screen.onmouseout = mouseOut
}


function mouseOver() {
   var welcomeMessage = document.querySelector(".welcomeMessage");
   welcomeMessage.className += " screenOn";
}

Note in mouseOver function I've changed getElementsByClassName, that you used, to the querySelector that way you get single object instead of the live HTMLCollection that returned from the getElementsByClassName

Collected from the Internet

Please contact [email protected] to delete if infringement.