Adding Hover-Effect to DIV without JavaScript (pure CSS)

Question

Assumed we have a simple, horizontal navigation of a website:

Above the navigation there is a rectangle placed.

Now I want to automatically "slide" this rectangle horizontally (left/right), depending on the navigation entry that is currently hovered.

Example:

If entry 2 ("About") is hovered, the rectangle should slide 5em to the right
If entry 5 ("Impress") is hovered, the rectangle should slide 20em to the right, etc.

HTML:

<div id="rectangle"></div>

<ul class="navigation">
    <li><a href="#">Entry 1</a></li>
    <li><a href="#">Entry 2</a></li>
    <li><a href="#">Entry 3</a></li>
    <li><a href="#">Entry 4</a></li>
    <li><a href="#">Entry 5</a></li>
</ul>

CSS:

I am not yet sure on how to solve this in CSS. My approach would be something like that:

#rectangle {
    background-color: powderblue;
    width: 10em;
    height: 2em;
    margin: 0 auto;
    position: absolute;
}

ul li:nth-child(1):hover ~ #rectangle {right:0em}
ul li:nth-child(2):hover ~ #rectangle {right:5em}
ul li:nth-child(3):hover ~ #rectangle {right:10em}
ul li:nth-child(4):hover ~ #rectangle {right:15em}
ul li:nth-child(5):hover ~ #rectangle {right:20em}

Unfortunately, this does not work as expected. Did I do something wrong?

#rectangle {
  background-color: powderblue;
  width: 10em;
  height: 2em;
  margin: 0 auto;
  position: absolute;
}

ul li:nth-child(1):hover~#rectangle {
  right: 0em
}

ul li:nth-child(2):hover~#rectangle {
  right: 5em
}

ul li:nth-child(3):hover~#rectangle {
  right: 10em
}

ul li:nth-child(4):hover~#rectangle {
  right: 15em
}

ul li:nth-child(5):hover~#rectangle {
  right: 20em
}

<div id="rectangle"></div>

<ul class="navigation">
  <li><a href="#">Entry 1</a></li>
  <li><a href="#">Entry 2</a></li>
  <li><a href="#">Entry 3</a></li>
  <li><a href="#">Entry 4</a></li>
  <li><a href="#">Entry 5</a></li>
</ul>

The selector ul li:nth-child(1):hover ~ #rectangle assumes that the element with the id "rectangle" is a sibling of the li element, following it. This is not the case with your markup. See developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors — Hans Spieß
– Hans Spieß, Commented Apr 18, 2021 at 23:08
Nor can it be, since the only valid siblings of an li are other lis. Maybe make the rectangle an li? Note that right adjusts the element's position from the right, so an element with a higher right value is actually farther to the left than one with a smaller right value. — Heretic Monkey
– Heretic Monkey, Commented Apr 18, 2021 at 23:12
Does this answer your question? How to affect other elements when one element is hovered — zoldxk
– zoldxk, Commented Apr 19, 2021 at 2:18

Hans Spieß · Accepted Answer · 2021-04-19 16:16:02Z

With the rectangle being a pseudo element, you could solve it this way (without an additional element):

ul {
  position: relative;
  margin: 0;
  padding: 0;
}

ul li {
  display: inline-block;
}

ul li:last-child:after {
  content: '';
  background-color: powderblue;
  width: 10em;
  height: 2em;
  margin: 0 auto;
  position: absolute;
  z-index: -1;
  left: 0;
  transition: .4s ease-in-out;
}

ul li:nth-child(1):hover~li:last-child:after {
  transform: translateX(0em);
}

ul li:nth-child(2):hover~li:last-child:after {
  transform: translateX(5em);
}

ul li:nth-child(3):hover~li:last-child:after {
  transform: translateX(10em);
}

ul li:nth-child(4):hover~li:last-child:after {
  transform: translateX(15em);
}

ul li:nth-child(5):hover:after {
  transform: translateX(20em);
}

<ul class="navigation">
  <li><a href="#">Entry 1</a></li>
  <li><a href="#">Entry 2</a></li>
  <li><a href="#">Entry 3</a></li>
  <li><a href="#">Entry 4</a></li>
  <li><a href="#">Entry 5</a></li>
</ul>

awholegnuworld · Accepted Answer · 2021-04-18 23:10:07Z

1

You could do display:none; on the regular div and the use the pseudo class :hover to display the content.

#mydiv {
display:none;
}
#mydiv:hover {
display:inline;
}

answered Apr 18, 2021 at 23:10

awholegnuworld

4312 silver badges12 bronze badges

Comments

user15065850 · Accepted Answer · 2021-04-19 16:30:12Z

1

The simple way to make this with pure CSS is:

just write class="navigation" and li hover

navigation li:hover{
opacity: 0.9;
padding-left: 3px;
padding-right: 7px;
background-color:#f2f2f2;
transition: 0.9s;

}

you can change other changes if you want...

answered Apr 19, 2021 at 16:30

user15065850

Comments

zoldxk · Accepted Answer · 2021-04-18 23:21:03Z

You can't using CSS (unless you follow these conditions) but you can get the same effect by changing your styles with jQuery in the onMouseOver and onMouseOut parameters,

$(function() {
  $('#a').hover(function() {
    $('#rectangle').css('right', '0em');
  }, function() {
   
    $('#rectangle').css('right', '');
  });
   $('#b').hover(function() {
    $('#rectangle').css('right', '5em');
  }, function() {
   
    $('#rectangle').css('right', '');
  });
   $('#c').hover(function() {
    $('#rectangle').css('right', '10em');
  }, function() {
    
    $('#rectangle').css('right', '');
  });
  $('#d').hover(function() {
    $('#rectangle').css('right', '15em');
  }, function() {
   
    $('#rectangle').css('right', '');
  });
  $('#e').hover(function() {
    $('#rectangle').css('right', '20em');
  }, function() {
   
    $('#rectangle').css('right', '');
  });
});

#rectangle {
    background-color: powderblue;
    width: 10em;
    height: 2em;
    margin: 0 auto;
    position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="navigation">
    <li><a href="#" id="a">Entry 1</a></li>
    <li><a href="#" id="b">Entry 2</a></li>
    <li><a href="#" id="c">Entry 3</a></li>
    <li><a href="#" id="d">Entry 4</a></li>
    <li><a href="#" id="e">Entry 5</a></li>
</ul>
<div id="rectangle"></div>

Collectives™ on Stack Overflow

Adding Hover-Effect to DIV without JavaScript (pure CSS)

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related