How to apply Hover-effects to other elements with the same css class?

user_13215995 0
Viewed 51

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

If not, how can I achieve this in JavaScript or 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>
css jquery javascript
1 Answers

What you want is not possible with plain CSS, but below I give you an example of how you could achieve this using 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>

user_77322820
Related