This is a really weird problem, and in fact the links look ugly when part of the hover color remains. For example, I will hover over a white line, it will turn blue, and when you hover over it, it will return to white, but with the bits of blue remaining above.
In the image below, “hi” is an unlinked link, “Quotes” shows the color on the left by the color of the link, and “Information Theory” is currently upside down and thus blue. As you can see, on the left in the color in “Quotes” my problem is here.
In addition, when you hover over the icon of this folder on one side of the folder, there is a little white color when the entire icon should be black when you hover.
Here is the jsfiddle for this problem: http://jsfiddle.net/000ge3xv/1/
You can easily play it with a violin if you quickly hover over all links back and forth. Ultimately, the color of the hang will be partially “stuck” on some links. I am testing a site in Chrome. I did not notice this problem in Safari and was not tested in other browsers.
UPDATE
After testing more, I think the problem is with scrolling the trackpad on the laptop. Since the sidebar scrolls if the user scrolls the list using the links cursor, the freezing state is activated when the user scrolls up or down. When the hover state is activated in this way, the color tends to get stuck, as shown in the photographs below. I usually look at the list, and then select a link that causes the states to activate when scrolling with the trackpad. Therefore, if you use a laptop (I use the trackpad track from macbook pro) and scroll to select a link, you should be able to reproduce the error.)
Here are the html and css that I use:
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 have all styles attached to #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; }