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 = "";

这将使颜色继承正确的风格。

然而，这也是正确的解决方案。您应该在框中添加类，然后执行：

＆＃13;

#box {
  height: 100px;
  width: 200px;
  background-color: white;
}

p:hover {
  color: green;
}

#box.altered {
  color: white;
  background-color: black;
}

.altered p:hover {
  color: red;
}

＆＃13;

<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>

＆＃13;

Answer 2

添加新课程

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

.purple {
  color: purple;
}

Answer 3

这是一个特异性问题，因此您需要在color属性上使用!important来强制它。

fiddle

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

Answer 4

如果您想使用纯JS进行操作，则需要监听onmouseover事件和onmouseout事件，检查我创建的代码

＆＃13;

var textElement = document.getElementById("text");
var defaultColor = textElement.style.color;

textElement.onmouseover = function(event) {
var currentElement = event.target;
currentElement.style.color = "red";
}

textElement.onmouseout = function(event) {
var currentElement = event.target;
currentElement.style.color = defaultColor;
}

＆＃13;

<div id="parent">
<p id="text">
I am a text that change its text color :D
</p>
</div>

＆＃13;

Answer 5

设置颜色后，将覆盖悬停。使用！important来强迫它：

p:hover{
  color: green !important;
}

JavaScript和CSS悬停问题

5 个答案: