Questo è davvero un problema strano e rende davvero i collegamenti brutti quando parte del colore del passaggio del mouse viene lasciata. Per esempio, passerò il mouse su un link che è bianco, diventerà di colore blu e, al passaggio del mouse, tornerà al bianco ma con frammenti di colore blu rimasti.Perché le parti del colore al passaggio del mouse sul css rimangono invariate quando si passa con il mouse sui collegamenti?
Nella figura sotto "ciao" è il collegamento non rilegato, "Virgolette" mostra il colore del passaggio del mouse su un collegamento, & "Teoria delle informazioni" è attualmente al passaggio del tempo e quindi blu. Come puoi vedere il colore di sinistra su "Quotes" è il mio problema qui.
Inoltre, quando il mouse sopra questa icona della cartella, c'è un po 'di bianco ancora su un lato della cartella in cui l'intera icona dovrebbe essere nero su passaggio del mouse.
Ecco un jsfiddle per questo problema:http://jsfiddle.net/000ge3xv/1/
Si può facilmente riprodurre con il violino, se si passa rapidamente su tutti i collegamenti avanti e indietro. Alla fine il colore del passaggio del mouse verrà parzialmente bloccato su alcuni collegamenti. Sto testando il sito in Chrome. Non ho notato il problema in Safari e non ho provato altri browser.
UPDATE
Dopo il test è di più, penso che il problema è legato alla scorrimento con un trackpad su un computer portatile. Poiché la barra laterale è scorrevole, se un utente sta scorrendo verso il basso l'elenco con il cursore sui collegamenti, lo stato di hover viene attivato mentre l'utente scorre verso l'alto o verso il basso. Quando lo stato del passaggio del mouse si attiva in questo modo, il colore tende a rimanere bloccato come mostrato nelle foto seguenti. In genere, scorrono verso il basso l'elenco e quindi seleziono un collegamento che attiva gli stati durante lo scorrimento con un trackpad. Quindi, se si utilizza un computer portatile (sto usando MacBook Pro trackpad) e scorrere fino a scegliere un collegamento che si dovrebbe essere in grado di riprodurre il bug)
Ecco il codice html e css sto usando:.
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>
Ecco il CSS. Ho tutti gli stili sono limitate all'ambito della #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;
}
Im in grado di replicare questo problema in Safari, OSX Mavericks – jamesJosephFinn
Chrome 37 su Windows qui, e il tuo jsFiddle sembra a posto. –
hmm, a volte si blocca subito, ea volte ci vuole un po 'di hovering per riprodurlo ... Per me accade costantemente e succede abbastanza spesso. Sto usando Chrome 37 su OSaver Mavericks. – nearpoint