JavaScript和CSS懸停問題

更改段落元素的顏色時，CSS懸停停止工作。JavaScript和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>

來源

2017-09-27 captincrunch

是的，這是一個選項@Syden – captincrunch

-1

設置顏色後，將懸停被覆蓋。使用重要的給力了！

p:hover{ 
    color: green !important; 
}

來源

2017-09-27 00:59:22 David

這是不對的！不要使用重要的，如果不是嚴格必要的，這是不好的做法... – Akxe

雖然這是解決方案，[！重要應該作爲最後的手段]（https://memegenerator.net/img/instances/500x/76500203 /important-does-not-fix-your-bad-css.jpg）。你應該利用[**更高的特異性**]（https://css-tricks.com/specifics-on-css-specificity/）代替:) –

這是具有特異性的問題，所以你需要使用!important上的color屬性，迫使它。

fiddle

注：這是不是最好的做法。根據您的意圖，添加課程或簡單地取消設置顏色可能是最佳選擇。

來源

2017-09-27 00:59:57 jhpratt

阻止它！如果不需要，請勿使用!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>

來源

2017-09-27 01:02:45 Akxe

當然，但這也取決於他們是否希望在懸停後保持綠色第一次點擊。原來的問題沒有說明。 – jhpratt

確實，仍然增加班級是更好的選擇，並且增加重要的綠色將使其僅與綠色工作...所以 – Akxe

是的，一個班級絕對是最好的選擇！真的，一切都取決於原來的目標。 – jhpratt

如果你想和你需要監聽onmouseover事件和onmouseout事件，檢查我所做的代碼純JS做

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>

來源

2017-09-27 01:05:40

添加新類

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

.purple { 
    color: purple; 
}

來源

2017-09-27 01:05:44 Alex

你這樣做的方式會奏效，但這種方式更清潔，並防止再次添加它。 – jhpratt

JavaScript和CSS懸停問題

回答

相關問題