How to use element for hovering container div

Question

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!

what do you mean exactly by "description slide right"? Just the word? the whole icon? something else? — Michael Coker, May 22 '17 at 18:52
This rule, `#mainicons i:hover + #icondesc i `, won't work as the second selector (after the `+`) refers to an element that is before itself, like a previous selector, which does not exist. Why do you keep your `` in 2 different wrappers? — Asons, May 22 '17 at 18:56

Michael Benjamin · Accepted Answer · 2017-05-22T19:06:30.877

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/

Ok thank you!! That's right I didn't even think to put the span in the same div.. Thanks for the tip! — Maëlle, May 22 '17 at 19:31

How to use element for hovering container div

1 Answers1