鼠标覆盖Javascript

我有这个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>

我想在div中添加“screenOn”类和“welcomeMessage”类，但它不起作用。有人能帮我吗

---

附言：我没有权利使用jQuery…

我已经修复了你的js代码，所以试着使用它知道，应该可以

JS:

---

请注意，在

mouseOver

函数中，我将您使用的

getElementsByClassName

更改为

querySelector

，这样您可以获得单个对象，而不是从

getElementsByClassName

调用的

initHover

返回的实时HTMLCollection？在哪里定义了鼠标输出？将

screenOn

添加到

class=“welcomeMessage”

将导致

class=“welcomeMessagescreenOn”

您是否阅读了有关

getElementsByClassName

工作原理的说明？首先，

文档。getElementsById

不存在。您需要的是

getElementById

。另外，

getElementsByClassName

返回类似数组的对象

welcomeMessage[0]。className+=“screenOn”

应该更好（在添加类名之前不要忘记空格）我刚刚尝试了您的修改，但它已经不起作用了。要显示

#iphone屏幕

，我使用CSS中带有动画的

：悬停

。问题是否应该来自此？您是否在js文件中的任何位置调用

initHover

函数？哦，我真是个白痴！现在成功了，非常感谢！如果您找到了答案，请将其作为答案进行检查。

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

  screen.onmouseover = mouseOver
  screen.onmouseout = mouseOut
}


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

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

   screen.onmouseover = mouseOver
   screen.onmouseout = mouseOut
}


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