0

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

| Home | About | Products | Contact | Impress | ... or similar...

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>
Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
Dave
  • 191
  • 6
  • 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 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors – Hans Spieß Apr 18 '21 at 23:08
  • 2
    Nor can it be, since the only valid siblings of an `li` are other `li`s. 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 Apr 18 '21 at 23:12
  • 1
    Does this answer your question? [How to affect other elements when one element is hovered](https://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-one-element-is-hovered) – zoldxk Apr 19 '21 at 02:18

4 Answers4

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;
}
awholegnuworld
  • 381
  • 1
  • 12
1

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>
Hans Spieß
  • 897
  • 7
  • 13
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...

0

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>
zoldxk
  • 2,632
  • 1
  • 7
  • 29