CODEWITHSUNDEEP
javascriptcss
Asaf Aviv
Asaf Aviv

Reputation: 11760

Hover effect only on parent div

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>

Upvotes: 1

Views: 226

Answers (2)

Guillaume Georges
Guillaume Georges

Reputation: 4020

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

Upvotes: 3

Brandon Mowat
Brandon Mowat

Reputation: 374

I think you can fix your bug by setting overflow: hidden on #sidebar

Upvotes: 1

Related Questions