zoukankan      html  css  js  c++  java
  • window版chrome 57.0.2970.0 (64-bit)滚动条的BUG

    有一个元素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>
  • 相关阅读:
    css 浮动元素居中
    盒子绝对定位 position:foxed ; 居中
    一些不常见的css知识
    apache 与php的安装
    dos命令
    php 数据库查询order by 与查询返回的数据类型
    最好花5分钟看一下:辞职后五险一金怎么办
    JDK神坑:JAVA中Calendar的月份Month少1
    三种代理服务器以及反向代理详解
    代理服务器基本知识普及代理IP使用方法!
  • 原文地址:https://www.cnblogs.com/wangmeijian/p/7028908.html
Copyright © 2011-2022 走看看