当鼠标悬停在链接上时,为什么部分css悬停颜色会遗留下来？
这是一个非常奇怪的问题,当剩余部分悬停颜色遗留下来时,确实会使链接看起来很难看.例如,我将鼠标悬停在一个白色的链接上,它将变为蓝色,并且在悬停时,它会变回白色,但剩下一些蓝色.
在下面的图片中,"hi"是未发现的链接,"Quotes"显示链接上的左侧悬停颜色,"信息理论"目前正在盘旋,因而是蓝色.正如你可以看到"报价"上的左侧颜色是我的问题.
此外,将鼠标悬停在此文件夹图标上时,如果整个图标在悬停时应为黑色,则文件夹的一侧会有一些白色.
这是这个问题的一个小问题: http ://jsfiddle.net/000ge3xv/1/
如果您快速将鼠标悬停在所有链接上,您可以轻松地使用小提琴重现它.最终,悬停颜色将部分"卡住"在某些链接上.我正在Chrome中测试该网站.我没有注意到Safari中的问题,也没有在其他浏览器中测试过.
UPDATE
经过更多测试后,我认为问题与在笔记本电脑上使用触控板滚动有关.由于侧边栏是可滚动的,如果用户使用光标在链接上向下滚动列表,则当用户向上或向下滚动时,悬停状态将被激活.当悬停状态以这种方式激活时,颜色趋于卡住,如下图所示.通常,我向下滚动列表,然后选择一个链接,该链接会在使用触控板滚动时激活状态.因此,如果您正在使用笔记本电脑(我正在使用macbook pro触控板)并滚动选择链接,您应该能够重现该错误.)
这是我正在使用的html和css:
HTML
<div id="sidebar">
<nav id="cbp-spmenu-s1" class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left unselectable cbp-spmenu-open">
<div class="sidebar-content">
<div class="heading">
<div class="fa fa-bookmark-o"></div>
<span data-toggle="modal" data-target="#newCollectionModal">
Bookmarks
<div class="fa fa-plus"></div>
</span>
</div>
<ul class="allList">
<li><a href="/bookmarks">All Bookmarks</a></li>
</ul>
<ul id="sortableCollections" class="ui-sortable">
<li><a href="/bookmarks/GhbYYoo2Qokib8Wkk">Created in IE</a></li>
<li><a href="/bookmarks/qFFspAHte7hKmFyuG">Test2</a></li>
<li><a href="/bookmarks/34ujRW3wjJrfTsbiG">Physics</a></li>
<li><a href="/bookmarks/h2otTW6rmPA3W7Ri3">Food</a></li>
<li><a href="/bookmarks/3AiQot9WvrGeMAN5C">Meteor Packages</a></li>
<li><a href="/bookmarks/y3Max5ind7N6CTRto">Seelio</a></li>
<li><a href="/bookmarks/tScXGq4ZMfSJx2LZL">Test</a></li>
<li><a href="/bookmarks/6ijnJL3GZzLgiaJso">Meteor</a></li>
</ul>
<div class="heading">
<div class="fa fa-pencil-square-o"></div>
<span data-toggle="modal" data-target="#newNotepadModal">
Notepads
<div class="fa fa-plus"></div>
</span>
</div>
<ul class="allList">
<li>
<a id="addFolderToNotepads" href="#">
<i class="fa fa-folder-o"></i>
<div class="fa fa-plus">Folder</div>
</a>
</li>
<li><a>All Notes</a></li>
</ul>
<ul id="sortableNotepads" class="ui-sortable">
<li>
<ul class="folder">
<div class="fa fa-folder-o folder-icon"> Untitled Folder </div>
<div class="fa fa-cog folder-settings"></div>
<li><a href="/notepad/ePZFucotx5Zcj8zbk">Solar</a></li>
</ul>
</li>
<li><a href="/notepad/WXpGG3xyahSX6eA3n">Test Top Rank</a></li>
<li><a href="/notepad/ijsy5hu7siTZxXYH2">Meteor</a></li>
<li><a href="/notepad/BDmHQxKmQd7hev2Jw">Created in IE</a></li>
<li><a href="/notepad/eMnRPNZsYZibZQHRN">Physics</a></li>
<li><a href="/notepad/M7bfJSjRd9CELT4gn">Again</a></li>
<li><a href="/notepad/QEDfcoLnH6QuaboEo">Another test</a></li>
</ul>
<ul>
<li>
<a href="/notepads_trash">
<div class="fa fa-trash-o"></div>
Trash
</a>
</li>
</ul>
<div class="sidebar-bottom-spacer"></div>
</div>
</nav>
这是CSS.我将所有样式都限定为#sidebar id
#sidebar .cbp-spmenu {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
background-color: rgba(167,177,199,0.95);
position: fixed;
border-top: 1px solid #ccc;
border-right: 1px solid #ccc;
-webkit-border-radius: 0px 10px 0 0;
border-radius: 0px 10px 0 0;
overflow-x: hidden;
overflow-y: hidden;
}
#sidebar .cbp-spmenu .sidebar-content {
text-align: left;
padding-top: 10px;
padding-left: 25px;
height: 100%;
overflow-x: hidden;
overflow-y: scroll;
margin-bottom: 70px;
word-wrap: break-word;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}
#sidebar .cbp-spmenu .sidebar-content .heading {
font-size: 26px;
color: #fff;
padding-bottom: 10px;
padding-top: 20px;
margin: 0;
font-weight: 400;
}
#sidebar .cbp-spmenu .sidebar-content .heading:hover {
color: #567283;
text-decoration: none;
cursor: pointer;
}
#sidebar .cbp-spmenu .sidebar-content .heading:hover .fa-plus {
color: #fff;
text-decoration: none;
cursor: pointer;
}
#sidebar .cbp-spmenu .sidebar-content .heading .fa-plus {
color: #6c6c6c;
font-size: 17px;
padding: 2px 2px;
margin-bottom: 2px;
vertical-align: middle;
}
#sidebar .cbp-spmenu .sidebar-content .heading .fa-folder-o {
color: #fff;
font-size: 22px;
}
#sidebar .cbp-spmenu .sidebar-content .heading .fa-folder-o:hover {
color: #000;
}
#sidebar .cbp-spmenu .sidebar-content .allList {
margin-bottom: 0px;
}
#sidebar .cbp-spmenu .sidebar-content ul {
list-style-type: none;
padding-left: 15px;
padding-right: 15px;
}
#sidebar .cbp-spmenu .sidebar-content ul a {
padding: 5px 0px;
cursor: pointer;
font-size: 16px;
color: #fff;
display: block;
text-decoration: none;
line-height: 22px;
font-weight: bold;
}
#sidebar .cbp-spmenu .sidebar-content ul a:hover {
color: #567283;
text-decoration: none;
}
#sidebar .cbp-spmenu .sidebar-content .folder {
margin: 5px 0px;
padding-left: 0px;
cursor: pointer;
font-size: 16px;
line-height: 22px;
height: 22px;
overflow: hidden;
}
#sidebar .cbp-spmenu .sidebar-content .folder.open {
height: auto;
}
#sidebar .cbp-spmenu .sidebar-content .folder:hover .fa-cog {
display: inline-block;
}
#sidebar .cbp-spmenu .sidebar-content .folder .fa {
font-weight: bold;
color: #fff;
}
#sidebar .cbp-spmenu .sidebar-content .folder .fa:hover {
color: #567283;
}
#sidebar .cbp-spmenu .sidebar-content .folder .fa-cog {
display: none;
cursor: pointer;
color: #fff;
}
#sidebar .cbp-spmenu .sidebar-content .folder .fa-cog:hover {
color: #567283;
}
#sidebar .cbp-spmenu .sidebar-content .folder li {
padding-left: 15px;
}
#sidebar .cbp-spmenu .sidebar-content .sidebar-bottom-spacer {
height: 70px;
}
#sidebar .cbp-spmenu.cbp-spmenu-vertical {
width: 250px;
height: 100%;
top: 60px;
z-index: 1000;
}
#sidebar .cbp-spmenu.cbp-spmenu-left {
-webkit-transform: translate3d(-250px, 0, 0);
-moz-transform: translate3d(-250px, 0, 0);
-o-transform: translate3d(-250px, 0, 0);
-ms-transform: translate3d(-250px, 0, 0);
transform: translate3d(-250px, 0, 0);
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
}
#sidebar .cbp-spmenu.cbp-spmenu-left.cbp-spmenu-open {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
}