JavaScript 和 CSS 悬停问题

Question

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

我做了一个演示来解释:https://jsfiddle.net/woan6b64/

我改变之后<p>'s颜色，悬停选择器停止工作。

我的问题是:

• 如何使用 JavaScript 更改悬停效果？
• 如何在更改颜色后让鼠标悬停工作？

JSFiddle 代码:

var shift = 0;

function change() {
  if (shift === 0) {
    document.getElementById("box").style.backgroundColor = "black";
    document.getElementById("text").style.color = "white";
    document.getElementById("text").innerHTML = 'Good! Now click the box again.';
    shift = 1;
  } else {
    document.getElementById("box").style.backgroundColor = "white";
    document.getElementById("text").style.color = "black";
    document.getElementById("text").innerHTML = 'Hover effect is now broken :(';
  }
}

#box {
  height: 100px;
  width: 200px;
  background-color: white;
}

p:hover {
  color: green;
}

<div id='box' onclick='change()'>
  <p id='text'>
    Click me for this box to change color. (Notice how I turn green when hovered)
  </p>
</div>

Answer 1

停下来!不要使用 !important 如果没有必要...你的问题是你将颜色设置为黑色。

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

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

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

#box {
  height: 100px;
  width: 200px;
  background-color: white;
}

p:hover {
  color: green;
}

#box.altered {
  color: white;
  background-color: black;
}

.altered p:hover {
  color: red;
}

<div id="box" onclick="this.classList.toggle('altered')">
  <p id='text'>
    Click me for this box to change color. (Notice how I turn green when hovered)
  </p>
</div>