在CSS中悬停时更改滚动条颜色

Question

我正在尝试在我的应用程序中更改滚动条悬停时的颜色，但奇怪的是，当我将鼠标悬停在上面时，它变成了红色。下面是我的代码：

    .scroller {
position: absolute;
top: 120px;
bottom: 0;
left: 0;
right: 0;
padding: 0;
margin-bottom: 10px;
overflow: auto;

}

    .scrooler:hover{  
      color: blue;
    }

使用这段代码后，当我将鼠标放到表格上时，所有文本都会变成蓝色。由于滚动条直接位于表格内部，所以我很难只选中滚动条。有没有办法只选择滚动条呢？

- Mikael Sauriol Saad

---

你的表格是否有scrooler类？ - EpicKip

我几乎不用CSS，但是.scroller:hover > *{ color: black; }对你有任何作用吗？这会使子元素变为黑色。 - EpicKip

这样设置文本的颜色为全黑，同时保持滚动条为红色 :S - Mikael Sauriol Saad

你不行，我已经检查了整个页面并尝试定位滚动条，它并不显示为一个元素。当我检查滚动条时，它只显示了整个表格，而没有显示表格的任何子元素是滚动条。 - Mikael Sauriol Saad

太好了，你弄清楚了！ - EpicKip

Answer 1

试试这个：

.scroller::-webkit-scrollbar-thumb:vertical:hover {
    background-color: #000;
}

- marcosvolpato

---

谢谢！我其实正试着做那个，只是忘记在前面加上滚动条类哈哈 - Mikael Sauriol Saad

Answer 2

滚动条是表格的一部分，颜色将是文字的颜色（一如既往），但是在CSS中有一个专门控制滚动条的属性：

scrollbar-base-color:YOURCOLOR;

只需将此代码放入您现有的类中

- EpicKip