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

【问题标题】：Adding Hover-Effect to DIV without JavaScript (pure CSS)在没有 JavaScript 的情况下向 DIV 添加悬停效果（纯 CSS）
【发布时间】：2021-04-18 22:58:49
【问题描述】：

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

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

在导航上方放置了一个矩形。

现在我想根据当前悬停的导航条目自动水平（左/右）“滑动”这个矩形。

例子：

如果条目 2（“关于”）悬停，矩形应向右滑动 5em
如果条目 5（“Impress”）悬停，矩形应向右滑动 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>

【问题讨论】：

选择器ul li:nth-child(1):hover ~ #rectangle 假定id 为“rectangle”的元素是li 元素的兄弟，紧随其后。您的标记并非如此。见developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors
也不可能，因为li 的唯一有效兄弟是其他lis。也许让矩形成为li？请注意，right 从右侧调整元素的位置，因此具有较高 right 值的元素实际上比具有较小 right 值的元素更靠左。
这能回答你的问题吗？ How to affect other elements when one element is hovered

标签： html css animation hover

【解决方案1】：

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

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>

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

使用纯 CSS 实现这一点的简单方法是：

只需写 class="navigation" 和 li hover

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

}

您可以根据需要更改其他更改...

【讨论】：

【解决方案4】：

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

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

【讨论】：