HTML / CSS | 滾動條 - 更改 div 和拇指上的顏色 hover
[英]HTML / CSS | Scrollbar - change color on div and thumb hover
問題描述
我希望我的可滾動 div 的滾動條具有淺色基色，然后在將鼠標懸停在可滾動 div 上時變暗，然后在將鼠標懸停在滾動條拇指上時變為黑色 go。
不幸的是，對於我當前的 CSS，當鼠標懸停在 div 上時，拇指只會變成較深的顏色，但不會變成 go 黑色。 我懷疑這是因為拇指在技術上仍然懸停在可滾動的 div 中，所以我的 div:hover 正在覆蓋我的拇指 hover。
我可以更改什么以使它按預期工作？
HTML/CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div#scrollable{
border: 5px red solid;
width: 150px;
height: 200px;
overflow-y: scroll;
}
::-webkit-scrollbar{
width: 10px;
}
::-webkit-scrollbar-track{
background: white;
}
::-webkit-scrollbar-thumb{
background: lightgray;
border-radius: 10px;
}
div:hover::-webkit-scrollbar-thumb{
background: gray;
}
::-webkit-scrollbar-thumb:hover {
background: black;
}
</style>
</head>
<body>
<div id="scrollable">
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
</div>
</body>
</html>
2 個解決方案
解決方案1
3 2021-01-13 22:13:47
正如 Dakota Methvin 所提到的，它正在被超越。 解決這個問題的最簡單方法是使用!important 。
div#scrollable { border: 5px red solid; width: 150px; height: 200px; overflow-y: scroll; }::-webkit-scrollbar { width: 10px; }::-webkit-scrollbar-track { background: white; }::-webkit-scrollbar-thumb { background: lightgray; border-radius: 10px; } div:hover::-webkit-scrollbar-thumb { background: gray; }::-webkit-scrollbar-thumb:hover { background: black;important; }
<div id="scrollable"> <p>lorem ipsum</p> <p>lorem ipsum</p> <p>lorem ipsum</p> <p>lorem ipsum</p> <p>lorem ipsum</p> <p>lorem ipsum</p> <p>lorem ipsum</p> <p>lorem ipsum</p> <p>lorem ipsum</p> <p>lorem ipsum</p> <p>lorem ipsum</p> <p>lorem ipsum</p> <p>lorem ipsum</p> <p>lorem ipsum</p> <p>lorem ipsum</p> <p>lorem ipsum</p> </div>
解決方案2
1 已采納 2021-01-13 22:11:52
選擇器div:hover::-webkit-scrollbar-thumb比::-webkit-scrollbar-thumb:hover更具體，這就是您沒有看到預期行為的原因。
您可以通過在更具體的選擇器中引入您的行為來解決此問題： div:hover::-webkit-scrollbar-thumb:hover 。
例子：
div#scrollable { border: 5px red solid; width: 150px; height: 200px; overflow-y: scroll; }::-webkit-scrollbar { width: 10px; }::-webkit-scrollbar-track { background: white; }::-webkit-scrollbar-thumb { background: lightgray; border-radius: 10px; } div:hover::-webkit-scrollbar-thumb { background: darkgray; } /* Not specific enough, will be overridden by the rule above. */::-webkit-scrollbar-thumb:hover { background: black; } /* Fixed. Now specific enough to achieve your desired behavior. */ div:hover::-webkit-scrollbar-thumb:hover { background: black; }
<body> <div id="scrollable"> <p>lorem ipsum</p> <p>lorem ipsum</p> <p>lorem ipsum</p> <p>lorem ipsum</p> <p>lorem ipsum</p> <p>lorem ipsum</p> <p>lorem ipsum</p> <p>lorem ipsum</p> <p>lorem ipsum</p> <p>lorem ipsum</p> <p>lorem ipsum</p> <p>lorem ipsum</p> <p>lorem ipsum</p> <p>lorem ipsum</p> <p>lorem ipsum</p> <p>lorem ipsum</p> </div> </body>
css ::-webkit-scrollbar-thumb無法更改比例（漸變顏色）
[英]css ::-webkit-scrollbar-thumb can't change scale(gradient color)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.