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

Question

假设我们有一个简单的网站水平导航：

|主页 |关于 |产品 |联系 |印象 | ...或类似...

导航上方有一个矩形。

现在我想自动水平“滑动”此矩形 (left/right)，具体取决于当前悬停的导航条目。

示例：

如果悬停条目 2（“关于”），矩形应向右滑动 5em
如果条目 5（“印象”）悬停，矩形应该向右滑动 20em，等等。

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:

我还不确定如何在 CSS 中解决这个问题。我的方法是这样的：

#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}

不幸的是，这没有按预期工作。我是不是做错了什么？

#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

你可以display:none；在常规 div 上并使用伪 class :hover 来显示内容。

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

Answer 2

您不能使用 CSS（除非您遵循这些 conditions），但您可以通过在 onMouseOver 中使用 jQuery 更改样式来获得相同的效果和 onMouseOut 个参数，

$(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>

Answer 3

矩形是一个伪元素，你可以这样解决（没有额外的元素）：

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 4

用纯 CSS 做这个的简单方法是：

只需写 class="navigation" 和 li hover

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

}

如果需要，您可以更改其他更改...

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

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

html

css

animation

hover