当鼠标悬停在链接上时，为什么部分css悬停颜色会遗留下来？

Question

This is really strange issue, and really makes the links look ugly when part of the hover color is left over. For example I will hover over a link which is white, it will turn a blue color, and on hover out, it turns back to white but with bits of blue color left over.

In the picture below 'hi' is the unhovered link, 'Quotes' shows the left over hover color on a link, & 'Information Theory' is currently being hovered over and thus blue. As you can see the left over color on 'Quotes' is my issue here.

Also, when hover over this folder icon, there is a bit of white still on one side of the folder when the entire icon should be black on hover.

Here is a jsfiddle for this issue: http://jsfiddle.net/000ge3xv/1/

You can easily reproduce it with the fiddle if you quickly hover over all the links back and forth. Eventually the hover color will get partially 'stuck' on some of the links. I am testing the site in Chrome. I have not noticed the issue in Safari, and have not tested in other browsers.

UPDATE

After testing it out more, I think the problem is related to scrolling with a trackpad on a laptop. Since the sidebar is scrollable, if a user is scrolling down the list with the cursor over the links, the hover state gets activated as user scrolls up or down. When the hover state is activating this way, the color tends to get stuck as shown in the photos below. Typically I scroll down the list and then select a link which causes the states to activate while scrolling with a trackpad. So if you are using a laptop (I am using macbook pro trackpad) and scroll to choose a link you should be able to reproduce the bug.)

Here is the html and css I am using:

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>

Here is the CSS. I all styles are scoped to the #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;
}

Answer 1

我看不到你的错误我在Windows 8.1下试过我的所有浏览器我觉得这个bug只在你的浏览器中:)