有一个元素div，它有一个子元素ul，给div添加一个:hover样式{color: red}，挡鼠标hover div时，字体变红。
当鼠标hover div时，ul字体变红，鼠标hover ul的滚动条，同样会触发div的:hover，ul的字体仍然显示红色，在“window版chrome 57.0.2970.0 (64-bit)”环境下，鼠标滑过ul的滚动条，竟然没有触发div的:hover 样式，很诡异，浏览器不认为滚动条是ul的一部分！
解决办法是：自定义ul的滚动条样式
源码：
<html>
<head></head>
<body>
<style>
.demo ul{
width: 300px;
max-height: 200px;
border: 1px solid #ccc;
overflow-x: hidden;
}
/*::-webkit-scrollbar{
background-color: red;
}
::-webkit-scrollbar-thumb{
background: yellow;
}*/
.demo:hover{
color: red;
}
</style>
<div class="demo">
<ul>
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
</ul>
</div>
</body>
</html>