Maëlle Jumel Maëlle Jumel - 1 year ago 33
CSS Question

How to use <i> element for hovering container div

I think I'm trying to do a pretty simple effect. I have a menu with 4 icons and I would like for the description to slide right when hovering. I'm not sure I'm able to do this with CSS because the div is after the first div's closing tag and I tried

+
but nothing happened.

Is it a problem with the
display:flex
? I gotta say I'm not used to work with that.

My code is here, I lowered the opacity of the
#mainicons i
just so you can see something of what's going on but it should be 1.



#mainicons {
position: fixed;
top: 250px;
left: 0px;
text-align: center;
}

#mainicons i {
opacity: 0.5;
display: flex;
flex-direction: column;
justify-content: space-between;
margin-top: 40;
height: 40px;
width: 50px;
padding: 10px;
color: white;
background: black;
text-align: center;
font-size: 15px;
line-height: 40px;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}

#mainicons i:hover {
border: 1.5px solid black;
color: black;
background: white;
}

#icondesc {
position: fixed;
top: 250px;
left: 0px;
text-align: center;
}

#icondesc i {
display: flex;
flex-direction: column;
justify-content: space-between;
top: 50%;
margin: 80;
color: black;
background: white;
width: 70px;
height: 50px;
line-height: 40px;
padding-left: 0px;
font-size: 15px;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}

#mainicons i:hover+#icondesc i {
margin-left: 50px;
}

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<div id="icondesc">
<i>Home</i>
<i>Ask</i>
<i>Request</i>
<i>Archive</i>
</div>
<div id="mainicons">
<a href="/"><i class="fa fa-home"></i></a>
<a href="/ask"><i class="fa fa-envelope"></i></a>
<a href="/submit"><i class="fa fa-pencil "></i></a>
<a href="/archive"><i class="fa fa-clock-o"></i></a>
</div>





Thank you for the replies!

Answer Source

The problem is not related to flex. You're trying to target elements based on the hovering of elements coming later in the DOM. That's basically an attempt to create a previous sibling selector, which is not natively possible in CSS.

I would put the text description in the same container with the icons and use absolute positioning for the transition effect. Here's a rough sketch:

#mainicons {
  position: fixed;
  top: 250px;
  left: 0px;
  text-align: center;
  display: flex;
  flex-direction: column;
}

#mainicons>a {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

#mainicons i {
  opacity: 1;
  height: 40px;
  width: 50px;
  padding: 10px;
  color: white;
  background: black;
  text-align: center;
  font-size: 15px;
  line-height: 40px;
  transition: all .5s ease;
}

#mainicons i:hover {
  border: 1.5px solid black;
  color: black;
  background: white;
}

#mainicons span {
  color: black;
  background: white;
  width: 70px;
  font-size: 15px;
  transition: all .5s ease;
  position: absolute;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  left: -100px;
  opacity: 0;
}

#mainicons a:hover>span {
  opacity: 1;
  left: 70px;
  transition: .5s;
  border: 1px solid black;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" />
<div id="mainicons">
  <a href="/"><i class="fa fa-home"></i><span>Home</span></a>
  <a href="/ask"><i class="fa fa-envelope"></i><span>Ask</span></a>
  <a href="/submit"><i class="fa fa-pencil "></i><span>Request</span></a>
  <a href="/archive"><i class="fa fa-clock-o"></i><span>Archive</span></a>
</div>

https://jsfiddle.net/qeoyyryp/1/

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download