Question

这是一个非常奇怪的问题，当部分悬停颜色遗留下来时，确实会使链接看起来很难看。例如，我将鼠标悬停在一个白色的链接上，它将变为蓝色，并且在悬停时，它会变回白色，但会留下一些蓝色。

在下图中＆＃39; hi＆＃39;是没有发现的链接，＆＃39;行情＆＃39;在链接上显示左侧悬停颜色，＆amp; ＆＃39;信息理论＆＃39;目前正在徘徊，因而蓝色。正如你可以在＆＃39; Quotes＆＃39;上看到左上方的颜色。是我的问题。

enter image description here

此外，将鼠标悬停在此文件夹图标上时，如果悬停时整个图标应为黑色，则文件夹的一侧会有一些白色。

enter image description here

以下是此问题的解答： http://jsfiddle.net/000ge3xv/1/

如果您快速将鼠标悬停在所有链接上，您可以轻松地使用小提琴重现它。最终，悬停颜色会被部分“卡住”。在一些链接上。我正在Chrome中测试该网站。我没有注意到Safari中的问题，也没有在其他浏览器中测试过。

更新

经过更多测试后，我认为问题与在笔记本电脑上使用触控板滚动有关。由于侧边栏是可滚动的，如果用户使用光标在链接上向下滚动列表，则当用户向上或向下滚动时，悬停状态将被激活。当悬停状态以这种方式激活时，颜色趋于卡住，如下图所示。通常，我向下滚动列表，然后选择一个链接，该链接会在使用触控板滚动时激活状态。因此，如果您正在使用笔记本电脑（我正在使用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;
}

Answer 1

我看不到您的错误我在Windows 8.1下尝试过我的所有浏览器我认为此错误仅在您的浏览器中：）

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

1 个答案: