悬停效果仅对父div

Question

I have a sidebar that expands on hover, right now im hiding the text with opacity and when i hover on the hidden spans it triggers the effect.

how can i solve this ? or maybe there is a better way to create this kind of effect that im looking for

Thanks in advance.

https://jsfiddle.net/aq9Laaew/2618/

 #sidebar { user-select: none; position: fixed; width: 55px; height: 100vh; background: #2c2c2c; transition: 0.5s; } #sidebar:hover { width: 250px; } #sidebar:hover .sidebar-item span { opacity: 1; } .sidebar-item { padding: 10px 10px; border-left: 5px solid transparent; } .sidebar-item span { opacity: 0; transition: 0.5s; } 

 <div id="sidebar"> <div class="sidebar-wrapper"> <div class="sidenav-menu d-flex flex-column flex-grow"> <div class="sidebar-item"> <a class="d-flex" href="/"> <i class="fa fa-lg fa-home" style="margin-left: 1px; margin-right: 20px"></i> <span>Home</span> </a> </div> <div class="sidebar-item"> <a class="d-flex" href="/profile"> <i class="fa fa-lg fa-user-o" style="margin-left: 1px; margin-right: 22px"></i> <span>Profile</span> </a> </div> </div> </div> </div> 

Answer 1

You changed the opacity of your elements but they're still in the document and so they're triggering the effect.

By using visibility: hidden / visible , hovering the labels won't trigger the effect :

.sidebar-item span {
    opacity:0;
    transition: 0.5s;
    visibility : hidden
}       
#sidebar:hover .sidebar-item span{
    opacity:1;
    visibility : visible
}

Your updated JSFiddle

Answer 2

我认为您可以通过设置overflow: hidden来解决错误overflow: hidden在#sidebar