JavaScript和CSS悬停问题

更改段落元素的颜色时，CSS悬停将停止工作

我制作了一个演示来解释：

更改

的

颜色后，悬停选择器停止工作

我的问题是:

• 如何使用JavaScript更改悬停效果
• 颜色改变后，我如何才能悬停工作

JSIDLE代码：

var移位=0；
函数更改（）{
如果（移位==0）{
document.getElementById（“box”）.style.backgroundColor=“黑色”；
document.getElementById（“text”）.style.color=“白色”；
document.getElementById（“text”）.innerHTML='很好！现在再次单击该框'；
移位=1；
}否则{
document.getElementById（“box”）.style.backgroundColor=“白色”；
document.getElementById（“text”）.style.color=“黑色”；
document.getElementById（“text”）.innerHTML='悬停效果现在被破坏：（'；
}
}

#框{
高度：100px；
宽度：200px；
背景色：白色；
}
p:悬停{
颜色：绿色；
}

单击我可更改此框的颜色。（注意我在悬停时是如何变为绿色的）

设置颜色后，将覆盖悬停。使用！要点强制悬停：

p:hover{
  color: green !important;
}

---

设置颜色后，将覆盖悬停。请使用！要点强制悬停：

p:hover{
  color: green !important;
}

---

这是一个具有特殊性的问题，因此您需要在color属性上使用

！important

，以强制它

---

注意：这不是最佳做法。根据您的意图，添加类或简单地取消设置颜色可能是最佳选择。

这是一个具有特殊性的问题，因此您需要在color属性上使用

！important

来强制执行

---

注意：这不是最佳做法。根据您的意图，添加类或简单地取消设置颜色可能是最佳选择。

停止！不要使用

！重要的
如果没有必要…您的问题是将颜色设置为黑色

document.getElementById("text").style.color = "";

这将使颜色继承正确的样式

然而，这也不是正确的解决方案。您应该将类添加到框中，然后执行以下操作：


#框{
高度：100px；
宽度：200px；
背景色：白色；
}
p:悬停{
颜色：绿色；
}
#改变{
颜色：白色；
背景色：黑色；
}
.p:悬停{
颜色：红色；
}


单击我可更改此框的颜色。（注意我在悬停时是如何变为绿色的）

停止！不要使用
！重要信息
如果没有必要…您的问题是您将颜色设置为黑色

document.getElementById("text").style.color = "";

这将使颜色继承正确的样式

然而，这也不是正确的解决方案。您应该将类添加到框中，然后执行以下操作：


#框{
高度：100px；
宽度：200px；
背景色：白色；
}
p:悬停{
颜色：绿色；
}
#改变{
颜色：白色；
背景色：黑色；
}
.p:悬停{
颜色：红色；
}


单击我可更改此框的颜色。（注意我在悬停时是如何变为绿色的）

如果你想使用纯JS，你需要监听
onmouseover
事件和
onmouseout
事件，检查我编写的代码


var textElement=document.getElementById（“text”）；
var defaultColor=textElement.style.color；
textElement.onmouseover=函数（事件）{
var currentElement=event.target；
currentElement.style.color=“红色”；
}
textElement.onmouseout=函数（事件）{
var currentElement=event.target；
currentElement.style.color=默认颜色；
}


我是一个改变文本颜色的文本：D

如果你想使用纯JS，你需要监听
onmouseover
事件和
onmouseout
事件，检查我编写的代码


var textElement=document.getElementById（“text”）；
var defaultColor=textElement.style.color；
textElement.onmouseover=函数（事件）{
var currentElement=event.target；
currentElement.style.color=“红色”；
}
textElement.onmouseout=函数（事件）{
var currentElement=event.target；
currentElement.style.color=默认颜色；
}


我是一个改变文本颜色的文本：D

添加新类

// document.getElementById("box").style.backgroundColor = "black";
// document.getElementById("text").style.color = "white";
document.getElementById("text").classList.add("purple");

.purple {
  color: purple;
}

添加一个新类

// document.getElementById("box").style.backgroundColor = "black";
// document.getElementById("text").style.color = "white";
document.getElementById("text").classList.add("purple");

.purple {
  color: purple;
}

是的，这是一个选项@Sydenyes，这是一个选项@SydenSure，但这也取决于他们是否希望在第一次被单击后悬停时显示绿色。这在原始问题中没有指定。没错，仍然添加类是更好的选项，向绿色添加重要内容将使其仅适用于绿色…soYeah，类肯定是最好的选项最好的选择！这一切都取决于最初的目标，真的。当然，但这也取决于他们是否希望在第一次单击鼠标后悬停时显示绿色。这在最初的问题中没有指定。没错，仍然添加类是更好的选择，向绿色添加重要内容将使其仅适用于绿色…soYeah，类肯定是最好的选择最好的选择！一切都取决于最初的目标，真的。这是不对的！如果没有严格必要，不要使用“重要”这是不好的做法…虽然这是解决方案，。你应该使用：）这是不对的！如果没有严格必要，请不要使用“重要”，这是一种不好的做法…虽然这是解决方案。你应该改为使用：）你这样做的方式是有效的，但是这种方式更干净，可以防止第二次添加。你这样做的方式是有效的，但是这种方式更干净，可以防止第二次添加。