लिंक पर होवर करते समय सीएसएस होवर रंग के हिस्सों को क्यों छोड़ दिया जाता है?

Question

यह वास्तव में अजीब मुद्दा है, और वास्तव में लिंक को बदसूरत लगते हैं जब होवर रंग का हिस्सा छोड़ दिया जाता है। उदाहरण के लिए, मैं एक लिंक पर सवार होउंगा जो सफेद है, यह नीला रंग बदल देगा, और होवर आउट हो जाएगा, यह वापस सफेद हो जाता है लेकिन नीले रंग के बिट्स के साथ छोड़ दिया जाता है।

'हाय' नीचे दी गई तस्वीर में अनछुए लिंक है, 'उद्धरण' एक लिंक पर होवर रंग के बाईं ओर दिखाता है, & 'सूचना सिद्धांत' वर्तमान में इस पर नीला हो रहा है और इस प्रकार नीला है। जैसा कि आप 'उद्धरण' पर बाएं रंग को देख सकते हैं, मेरी समस्या यहां है।

इसके अलावा, पर इस फ़ोल्डर आइकन, वहाँ फ़ोल्डर के एक तरफ अभी भी सफेद का एक सा है जब मंडराना जब पूरा आइकन हॉवर पर काला होना चाहिए।

यहाँ इस समस्या के लिए एक jsfiddle है:http://jsfiddle.net/000ge3xv/1/

आप आसानी से बेला के साथ पुन: पेश कर सकते हैं अगर आप जल्दी से अधिक सभी लिंक आगे और पीछे ले जाएं। आखिरकार होवर रंग कुछ लिंक पर आंशिक रूप से 'अटक गया' होगा। मैं क्रोम में साइट का परीक्षण कर रहा हूं। मैंने सफारी में इस मुद्दे को नहीं देखा है, और अन्य ब्राउज़रों में परीक्षण नहीं किया है।

अद्यतन

अधिक इसे बाहर का परीक्षण करने के बाद, मुझे लगता है कि समस्या एक लैपटॉप पर एक ट्रैकपैड के साथ स्क्रॉल से संबंधित है। चूंकि साइडबार स्क्रोल करने योग्य है, यदि कोई उपयोगकर्ता लिंक पर कर्सर के साथ सूची को स्क्रॉल कर रहा है, तो होवर स्थिति सक्रिय हो जाती है क्योंकि उपयोगकर्ता स्क्रॉल ऊपर या नीचे होता है। जब होवर राज्य इस तरह से सक्रिय होता है, तो रंग नीचे दी गई तस्वीरों में दिखाए गए अनुसार अटक जाता है। आम तौर पर मैं सूची को नीचे स्क्रॉल करता हूं और फिर एक लिंक का चयन करता हूं जो ट्रैकपैड के साथ स्क्रॉल करते समय राज्यों को सक्रिय करने का कारण बनता है। तो अगर आप एक लैपटॉप का प्रयोग कर रहे हैं (मैं मैकबुक प्रो ट्रैकपैड उपयोग कर रहा हूँ) और एक लिंक का चयन करने के लिए स्क्रॉल आप बग पुन: पेश करने में सक्षम होना चाहिए)

यहाँ 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> 

यहां सीएसएस है। मैं सभी शैलियों #sidebar आईडी के दायरे वाला कर रहे हैं

#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 के तहत मेरे सभी ब्राउज़रों की कोशिश की है मुझे लगता है कि इस बग आपके ब्राउज़र केवल :)