Chrome固定div在鏈接上懸停時消失

所以我在一個網站（beta.kylehorkley.com）上工作。最奇怪的事情正在發生。我正在研究側邊欄類型的東西（一旦窗口足夠小，就會出現）。但是，當我將鼠標懸停在側欄中的鏈接上時，側欄消失，然後在一秒鐘後重新出現。 Chrome和Opera發生這種情況（Firefox和Edge按預期工作）。Chrome固定div在鏈接上懸停時消失

側邊欄HTML：

<div id="sidebar" class="sidebar"> 
    <a href="/" class="sidelink active">home</a> 
    <a href="/contact/" class="sidelink">contact</a> 
    <a href="/portfolio/" class="sidelink">portfolio</a> 
    <a href="/about/" class="sidelink">about</a> 
</div>

邊欄CSS：

.sidebar { 
    background-color: rgba(255, 255, 255, 0.95); 
    height: calc(100% - 91px); 
    overflow-x: hidden; 
    position: fixed; 
     top: 91px; left: 0; 
    width: 100%; 
    z-index: 999; 
}

邊欄鏈接CSS：

.sidelink { 
    border-bottom: 3px solid; 
    border-bottom-color: transparent; 
    color: rgb(50, 125, 150); 
    display: block; 
    font-family: "Varela Round"; 
    font-size: 20px; 
    font-weight: 400; 
    margin: 26px 24px 0 24px; 
    opacity: 0.8; 
    padding: 0 4px 11px 4px; 
    text-transform: uppercase; 
    transition: opacity .35s ease; 
} 

.sidelink:hover { 
    opacity: 1; 
    transition: opacity .35s ease; 
} 

.sidelink.active { 
    font-weight: bold; 
    opacity: 1; 
}

來源

2016-07-23 Kyle Horkley

而是改變不透明度，改變顏色和這個作品（嘗試和測試）..這將修復消失的問題..

.sidelink { 
    border-bottom: 3px solid; 
    border-bottom-color: transparent; 
    color:#a9c9d3; 
    display: block; 
    font-family: "Varela Round"; 
    font-size: 20px; 
    font-weight: 400; 
    margin: 26px 24px 0 24px; 
    padding: 0 4px 11px 4px; 
    text-transform: uppercase; 
    transition: all ease 0.3s; 
} 

.sidelink:hover { 
    color: rgb(50, 125, 150); 
    transition: all ease 0.3s; 
}

用上面的代碼替換您的類。#a9c9d3是將不透明度更改爲0.8時的確切顏色。這將修復div的消失問題。

來源

2016-07-23 18:15:50

你，先生，是救生員。謝謝！ –

Chrome固定div在鏈接上懸停時消失

回答

相關問題