将鼠标悬停在其上时如何更改-webkit-scrollbar宽度 [英] How to change -webkit-scrollbar width when hover on it

问题描述

我想将滚动条的宽度变宽，因此当用户将鼠标悬停在其上时，它看起来很清晰.

I want to change the scrollbar width wider, so it looks clear when user hover on it.

所以我写道:

::-webkit-scrollbar {
width: 7px;
height: 7px;
background-color: #ddd;
}
::-webkit-scrollbar:hover {
width: 10px;
height: 10px;
background-color: red;
}

背景颜色变为红色，但宽度未变为红色，是否有解决方法? 这是 plnkr

The background color changed to red, but not the width, Is there anyway to solve this? Here is plnkr

推荐答案

*:hover::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

这将更改任何元素滚动条的宽度和高度.如果您想更具体一点，只需将"*"交换为您选择的选择器即可.例如，将其应用于"my-custom-scrollbar"类的元素的滚动条:

This will change the width and height of any element's scrollbar. If you want to be more specific, just exchange the '*' to a selector of your choice. For instance, to apply it to scrollbars of elements with the class of 'my-custom-scrollbar':

.my-custom-scrollbar:hover::-webkit-scrollbar {
        width: 10px;
        height: 10px;
}

这篇关于将鼠标悬停在其上时如何更改-webkit-scrollbar宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！