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

这里我有一个

textfield

，我在mousehave上提供了

textfield

函数，如下所示

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

这是我的JavaScript

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

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

---

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

您可以将

id=“abc”

输入给

本身，或者执行类似操作：

<div id="abc">
  <input style="color: inherit" type="text">
</div>



您正在对div应用颜色更改。您需要在输入框中应用颜色更改

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


   function mouseOver() {
     document.getElementById("xyz").style.color = "red";
     console.log("In");
   }

   function mouseOut() {
     document.getElementById("xyz").style.color = "black";
     console.log("Out");
   }


函数mouseOver（）{
document.getElementById（“xyz”）.style.color=“红色”；
控制台。登录（“登录”）；
}
函数mouseOut（）{
document.getElementById（“xyz”）.style.color=“黑色”；
控制台。登录（“退出”）；
}
通常，元素的颜色属性因浏览器而异。因此，将颜色属性设置为父元素不会对所有浏览器产生相同的影响，除非明确指定

这是你可以做的事情


函数mouseOver（）{
document.getElementById（“abc”）.style.color=“红色”；
}
函数mouseOut（）{
document.getElementById（“abc”）.style.color=“黑色”；
}
#abc*{
颜色：当前颜色；
}
全部显示
虽然这并不能直接回答您关于JavaScript的问题，但我想指出，级联样式表（CSS）是解决此问题的更好方法，因为JavaScript在浏览器中总是可以关闭的。在这种情况下，鼠标悬停功能将停止工作，而样式表将保持不变


#abc输入{
背景色：红色；
颜色：黑色；
}
#abc输入：悬停{
背景颜色：蓝色；
颜色：白色；
}



全部展示
给他们四个相爱的人。你有单独的床铺。他似乎怀疑他的好奇心和快乐。通过交谈的喜悦引领所有的尝试。他敢说我忙。他认为友谊的鲁莽是喧闹的。
函数mouseOver（）{
document.getElementById（“abc”）.style.color=“红色”；
}
函数mouseOut（）{
document.getElementById（“abc”）.style.color=“黑色”；
}
执行此操作的一个非常快速的方法是使用“切换”。然后，您可以在css中创建两个具有所需颜色的类。在javascript行中，引用希望与div中现有类切换的颜色


/*这里使用javascript在蓝色和金色之间循环。首先使用document.getElementById（'element'）找到div*/
函数push（）{
document.getElementById（“abc”）.classList.toggle（“蓝色”）；
}
#abc{
宽度：200px；
高度：150像素；
填充：20px；
字体系列：arial；
颜色：黑色；
}
/*您要切换的第一个颜色*/
.金{
背景：金；
}
/*要切换的第二种颜色*/
蓝先生{
背景：道奇蓝；
}

将鼠标悬停在此处切换类。
如果要更改文本框值的颜色，请使用文本框中的id。如何给列表标签？@Kirataka你是什么意思？请提供代码/示例。也许用同样的密码笔？
<div id="abc">
  <input id="xyz" type="text">
</div>


   function mouseOver() {
     document.getElementById("xyz").style.color = "red";
     console.log("In");
   }

   function mouseOut() {
     document.getElementById("xyz").style.color = "black";
     console.log("Out");
   }