Kyle Horkley Kyle Horkley - 4 months ago 27
CSS Question

Chrome fixed div disappearing when hovering over links

So I'm working on a site (beta.kylehorkley.com). The weirdest thing is happening. I'm working on a sidebar type thing (it appears once the window is small enough). However, when I hover over the links in the side bar, the side bar disappears and then reappears about a second later. This is happening in Chrome and Opera (Firefox and Edge work as expected).

Sidebar 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>


Sidebar 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;
}


Sidebar link 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;
}

Answer

Instead of changing the opacity, change the color and this works(tried and tested)..This will fix the disappearing issue..

.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;
}

Replace your class with the above code.. #a9c9d3 is the exact color when you change the opacity to 0.8. And this will fix the div disappearing issue..

Comments