在没有 JavaScript 的情况下向 DIV 添加悬停效果（纯 CSS）

Question

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>

Answer 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;
}

Answer 2

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>

Answer 3

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...

Answer 4

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>