有一个元素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>