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

window版chrome 57.0.2970.0 (64-bit)滚动条的BUG的更多相关文章

  1. API Monitor v2.0 Alpha-r13 (32+64) 汉化版

    API Monitor v2.0 Alpha-r13 (32+64) 汉化版: 链接: https://pan.baidu.com/s/1jIx5znC 密码: 4538 本软件已最大化汉化,已经趋于 ...

  2. mac版chrome升级到Version 65.0.3325.18后无法打开百度bing搜狗

    mac版本chrome升级到Version 65.0.3325.18后发现突然无法访问百度,搜狗,bing,神马等一系列的国内搜索引擎网站.连百度的儿子们比如知道,百度百科都无法访问. 1.首先想到的 ...

  3. 60.0.1（64位）windows版 uploadify使用有问题

    http://mozilla.com.cn/thread-403024-1-1.html 60.0.1(64位)版,在使用uploadify插件,上传附件时,上传没有问题,可以成功,但执行上传成功后的 ...

  4. 配置Windows 2008 R2 64位 Odoo 8.0/9.0 源码开发调试环境

    安装过程中,需要互联网连接下载python依赖库: 1.安装: Windows Server 2008 R2 x64标准版 2.安装: Python 2.7.10 amd64 到C:\Python27 ...

  5. Ubuntu14.04 64位机上安装cuda8.0 cudnn5.0操作步骤 - 网络资源是无限的

    查看Ubuntu14.04 64位上显卡信息,执行: lspci | grep -i vga lspci -v -s 01:00.0 nvidia-smi 第一条此命令可以显示一些显卡的相关信息:如果 ...

  6. libnode 0.4.0 发布，C++ 语言版的 Node.js

    libnode 0.4.0 支持 Windows ,提升了性能,libuv 更新到 0.10.17 版本,libj 更新到 0.8.2 版本. libnode 是 C++ 语言版的 Node.js,和 ...

  7. hadoop2.2.0伪分布模式64位安装

    hadoop2.2.0伪分布模式64位安装用到的软件:jdk-6u45-linux-x64.bin,hadoop-2.2.0.x86_64.tar.gz 修改主机名vim /etc/sysconfig ...

  8. VS2015预览版中的C#6.0 新功能（二）

    VS2015预览版中的C#6.0 新功能(一) VS2015预览版中的C#6.0 新功能(三) 自动属性的增强 只读自动属性 以前自动属性必须同时提供setter和getter方法,因而只读属性只能通 ...

  9. VS2015预览版中的C#6.0 新功能（三）

    VS2015预览版中的C#6.0 新功能(一) VS2015预览版中的C#6.0 新功能(二) Using static 使用using StaticClass,你可以访问StaticClass类里的 ...

随机推荐

  1. include的作用

    #include发生在预处理阶段,整个编译链接过程,#include是最简单的了,没有之一.就是在include的位置直接把文件原原本本完完整整一字不落的包含进来,下面举一个极端点的例子: //fil ...

  2. Linux关机&重启命令

    ⒈shutdown ①shutdown -h now 立即关机 ②shutdown -h 1 1分钟后关机 ③shutdown -r now 立即重启 ⒉halt 立即关机 ⒊reboot 立即重启 ...

  3. 使用SpringSecurity保护方法应用

    (1)pom添加依赖 <dependency> <groupId>org.springframework.security</groupId> <artifa ...

  4. LogParse-Windows系统日志分析

    Windows系统日志分析 一.前言 本文将对常见的日志类型,利用微软日志分析工具(LogParser)结合已经掌握的恶意代码分析Windows系统日志,关联出系统的异常. 数据来源于Windows的 ...

  5. python实战===教你用微信每天给女朋友说晚安

    但凡一件事,稍微有些重复.我就考虑怎么样用程序来实现它. 这里给各位程序员朋友分享如何每天给朋友定时微信发送”晚安“,故事,新闻,等等··· ···最好运行在服务器上,这样后台挂起来更方便. 准备: ...

  6. mysql之 innobackupex备份+binlog日志的完全恢复【转】

    前言: MySQL的完全恢复,我们可以借助于完整的 备份+binlog 来将数据库恢复到故障点. 备份可以是热备与逻辑备份(mysqldump),只要备份与binlog是完整的,都可以实现完全恢复. ...

  7. Python3学习笔记07-List

    Python有6个序列的内置类型,但最常见的是列表和元 序列都可以进行的操作包括索引,切片,加,乘,检查成员. 此外,Python已经内置确定序列的长度以及确定最大和最小的元素的方法. 创建一个列表, ...

  8. 『转载』hadoop 1.X到2.X的变化

    表1新旧hadoop脚本/变量/位置变化表 改变项 原框架中 新框架中(Yarn) 备注 配置文件位置 ${hadoop_home_dir}/conf ${hadoop_home_dir}/etc/h ...

  9. tomcat端口冲突，多个tomcat同时启动问题

    一台PC机上安装了两个tomcat,需要同时启动,每个tomcat上跑一个程序,但是现在提示端口号冲突,需要手动更改. 需要修改/conf/server.xml四个地方: 1.<Server p ...

  10. 解决sdk更新时候报错 http://dl-ssl.google.com/android上不去，链接拒绝

    解决国内访问Google服务器的困难: 启动 Android SDK Manager : 打开主界面,依次选择「Tools」.「Options...」,弹出『Android SDK Manager - ...