如何将悬停效果应用于具有相同 css class 的其他元素？

Question

I have this code snippet here我在这里有这个代码片段

<div class="container-01">container-01
  <ul class="container-01-ul">
    <li class="list-item-01">list-item-01</li>
    <li class="list-item-02">list-item-02</li>
    <li class="list-item-03">list-item-03</li>
    <li class="list-item-04">list-item-04</li>
    <li class="list-item-05">list-item-05</li>
  </ul>
</div>
<div class="container-02">container-02
  <ul class="container-02-ul">
    <li class="list-item-01">list-item-01</li>
    <li class="list-item-02">list-item-02</li>
    <li class="list-item-03">list-item-03</li>
    <li class="list-item-04">list-item-04</li>
    <li class="list-item-05">list-item-05</li>
  </ul>
</div>

For example if I hover on list-item-01 in container-01 the other list-item-01 in container-02 should also have the same effect?例如，如果我在container-01中的 list-item list-item-01上的 hover ，那么 container- container-02中的另一个list-item-01也应该具有相同的效果？ Like I want to change the background-color when hovering on one of the list-item but it should also change the background-color of the other one.就像我想在将鼠标悬停在其中一个列表项上时更改背景颜色一样，但它也应该更改另一个列表项的背景颜色。

Is it possible with plain CSS?普通的 CSS 可以吗？

If not, how can I achieve this in JavaScript or jQuery?如果没有，我如何在 JavaScript 或 jQuery 中实现这一点？

I tried with this one which works but is there any better solutions??我试过这个可行，但有更好的解决方案吗？

<head>
<script>
  function changeColor(x) {
    document.querySelectorAll("." + x).forEach(el => el.style.backgroundColor = 'red');
  }

  function normal(x) {
    document.querySelectorAll("." + x).forEach(el => el.style.backgroundColor = 'transparent');
  }
</script>
</head>

<body>
<div class="container-01">container-01
  <ul class="container-01-ul">
    <li class="list-item-01" onmouseover="changeColor(this.className)" onmouseout="normal(this.className)">list-item-01</li>
    <li class="list-item-02" onmouseover="changeColor(this.className)" onmouseout="normal(this.className)">list-item-02</li>
    <li class="list-item-03" onmouseover="changeColor(this.className)" onmouseout="normal(this.className)">list-item-03</li>
    <li class="list-item-04" onmouseover="changeColor(this.className)" onmouseout="normal(this.className)">list-item-04</li>
    <li class="list-item-05" onmouseover="changeColor(this.className)" onmouseout="normal(this.className)">list-item-05</li>
  </ul>
</div>
<div class="container-02">container-02
  <ul class="container-02-ul">
    <li class="list-item-01" onmouseover="changeColor(this.className)" onmouseout="normal(this.className)">list-item-01</li>
    <li class="list-item-02" onmouseover="changeColor(this.className)" onmouseout="normal(this.className)">list-item-02</li>
    <li class="list-item-03" onmouseover="changeColor(this.className)" onmouseout="normal(this.className)">list-item-03</li>
    <li class="list-item-04" onmouseover="changeColor(this.className)" onmouseout="normal(this.className)" >list-item-04</li>
    <li class="list-item-05" onmouseover="changeColor(this.className)" onmouseout="normal(this.className)">list-item-05</li>
  </ul>
</div>
</body>

Answer 1

What you want is not possible with plain CSS, but below I give you an example of how you could achieve this using JavaScript:使用普通的 CSS 无法实现您想要的，但下面我将举例说明如何使用 JavaScript 实现这一目标：

 // attach a global eventListener for illustrative purposes, // using a closer target would mean it's called less often document.addEventListener('mouseover', ({ target }) => { const className = target.className; // check if the target has the class fitting our pattern // NOTE: this might breaks when the element has more than one class. // using a data attribute would be more robust if (/list-item-\d{2}/.test(className)) { // get an array of all elements with that class const siblings = [...document.getElementsByClassName(className)]; // give each of those the hovered-class siblings.forEach(s => s.classList.add('hovered')); // attach an one-time eventListener to the target // to remove the hovered class on mouseleave target.addEventListener( 'mouseleave', () => siblings.forEach(s => s.classList.remove('hovered')), { once: true } ); } });

 .hovered { background: blue; }

 <div class="container-01">container-01 <ul class="container-01-ul"> <li class="list-item-01">list-item-01</li> <li class="list-item-02">list-item-02</li> <li class="list-item-03">list-item-03</li> <li class="list-item-04">list-item-04</li> <li class="list-item-05">list-item-05</li> </ul> </div> <div class="container-02">container-02 <ul class="container-02-ul"> <li class="list-item-01">list-item-01</li> <li class="list-item-02">list-item-02</li> <li class="list-item-03">list-item-03</li> <li class="list-item-04">list-item-04</li> <li class="list-item-05">list-item-05</li> </ul> </div>

如何将悬停效果应用于具有相同 css class 的其他元素？

问题描述

1 个解决方案

解决方案1
1 已采纳 2021-05-01 09:58:53

如何将悬停效果应用于具有相同 css class 的其他元素？

问题描述

1 个解决方案

解决方案1 1 已采纳 2021-05-01 09:58:53

解决方案1
1 已采纳 2021-05-01 09:58:53