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

如何解决在没有 JavaScript 的情况下向 DIV 添加悬停效果纯 CSS

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

|首页 |关于 |产品 |联系 |留下深刻印象 | ...或类似...

导航上方有一个矩形。

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

示例：

如果将鼠标悬停在条目 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>

解决方法

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

<form [formGroup]="checkboxGroup">
   <ion-card-subtitle>
      <ion-label class="title">Title</ion-label>
   </ion-card-subtitle>
   <ion-card-content class="checkbox">
      <ng-container *ngFor="let checkbox of  valence; let i = index" [result of checkboxes][1] formArrayName="valence">
      <!--iterate over  array-->
      <input type="checkbox" [formControlName]="i" (change)="onChange(checkbox)" /> 
      {{checkbox.name}}
     <br />
     </ng-container>
   </ion-card-content>
</form>

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

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>

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

只需编写 class="navigation" 和 li hover

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

}

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

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

onMouseOut

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

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