How to use <i> element for hovering container div

Maëlle

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!

Michael Benjamin

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/

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

How do I add a delay for hovering an element in angularjs?

Javascript: How do i target selected elements in a slideshow when hovering over one element?

How do I display text while hovering over a container?

How to show the value of each element when hovering

Use of picture element as a container instead of a div

How to change color on every element in div when hovering?

How do I trigger a click when hovering over a element for x seconds, using JQuery?

How would I show text inside a span tag when hovering over a different element?

How to make an element active on hover, and remain active when im hovering over another specific div

How do I use jQuery to create hovering elements?

How to scroll up a div when hovering over another element

javascript how do i use the hover element on a div-element using a script with namespace?

swap image when hovering over its container div

How to lock an element to the bottom of a div that is in a container (square)?

How to hide container div title when hovering inner elements?

How can I make a left side popup box when hovering element in HTML?

How do I display the value of a heatmap element by hovering the cursor over it?

How can I make the element stay in its place with CSS when hovering

How would I use the `click` function on a `div` element?

How to change icon colour when hovering on enclosing div container

How can I get make element visible by hovering other element

How do I use a ::after div within a ::before container?

How to locate inner element after hovering (Selenium)

How to change a div element and its child elements at the same time when hovering?

Angular - Hovering div will display a container, but container disappears after trying to hover it

How to display div with hovering on a nested div?

How can I change one svg path ID element when hovering over another element

How to use tailwindcss to change the color of each element when hovering over descendant elements

How do I set an element in a container to scroll as a fixed element?