javascript - javascript中鼠标悬停时更改div颜色

Question

这里我有一个 textfield，我给了它 onmousehover 函数，如下所示。

<h5 style="float:right;" id="showall" onmouseover="mouseOver()" onmouseout="mouseOut()">Show All</h5>

这是一个 div，当我将鼠标悬停到显示全部时，我必须为其应用悬停效果 div

<div id="abc">
  <input type="text">
</div>

这是我的 JavaScript

   function mouseOver() {
     document.getElementById("abc").style.color = "red";
   }

   function mouseOut() {
     document.getElementById("abc").style.color = "black";
   }

上面的代码不起作用。谁能告诉我哪里错了。

Answer 1

虽然这并不能直接回答您有关 JavaScript 的问题，但我想指出级联样式表 (CSS) 是解决此问题的更好方法，因为 JavaScript 始终可以在浏览器中关闭。在这种情况下，您的鼠标悬停功能将停止工作，而样式表将保留。

#abc input {
  background-color: red;  
  color: black;
}

#abc input:hover {
  background-color: blue;  
  color: white;
}

<div id="abc">
  <input type="text" value="mouseover me">
</div>

如果达到相同的结果，则优先考虑 CSS 而不是 JavaScript。