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> 

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強制使用它。

小提琴

注意：這不是最佳做法。 根據您的意圖，添加類或僅取消設置顏色可能是最佳選擇。

Answer 4

如果要使用純JS完成此操作，則需要監聽onmouseover事件和onmouseout事件，請檢查我編寫的代碼

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

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

Answer 5

設置顏色后，懸停將被覆蓋。 使用！important強制它：

p:hover{
  color: green !important;
}