Is there a way to hover one element and to style many others with pure css/js?

Question

I have tried giving id to the element which I want to style when I hover over a div. And I have given the div an "onmouseover" attribute with the value of a function which changes the style of the element, but it changes it permanently and even when my mouse isn't on the element

<div class= "container">
      <div class="row"> 
        <div class="item1 col-sm-3" ">
          <a href="#">
            <img class="picture" id="picture1"src="/Rimani/images/logo-tractor-removebg-preview.png">
            <div class="text" onmouseover="hoverStyle()">НОВО ОБОРУДВАНЕ</div>
          </a>
        </div>
           <div class="item2 col-sm-3" onmouseover="hoverStyle()">
          <a href="#" >
            <img class="picture" id="picture2" src="/Rimani/images/logo-tractor-removebg-preview.png">
            <div class="text">НОВО ОБОРУДВАНЕ</div>
          </a>
        </div>

  var hoverElements = document.getElementsByClassName('picture');

function hoverStyle() {
    document.getElementById("picture1").style.filter = "hue-rotate(340deg)"
 document.getElementById("picture2").style.filter = "hue-rotate(340deg)"
}

This is best done with CSS classes added and removed in functions called on your events. You'll need one for mouseover (or -enter) and one for mouseout (or -leave). — isherwood, Nov 06 '19 at 19:54
Does this answer your question? [How to affect other elements when one element is hovered](https://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-one-element-is-hovered) — Sean, Nov 06 '19 at 19:58

score 0 · Accepted Answer · answered Nov 06 '19 at 19:59

Add an onmouseout event:

<div class= "container">
      <div class="row"> 
        <div class="item1 col-sm-3" ">
          <a href="#">
            <img class="picture" id="picture1"src="/Rimani/images/logo-tractor-removebg-preview.png">
            <div class="text" onmouseover="hoverStyle()">НОВО ОБОРУДВАНЕ</div>
          </a>
        </div>
           <div class="item2 col-sm-3" onmouseover="hoverStyle()" onmouseout="unhoverStyle()">
          <a href="#" >
            <img class="picture" id="picture2" src="/Rimani/images/logo-tractor-removebg-preview.png">
            <div class="text">НОВО ОБОРУДВАНЕ</div>
          </a>
        </div>

  var hoverElements = document.getElementsByClassName('picture');

function hoverStyle() {
    document.getElementById("picture1").style.filter = "hue-rotate(340deg)"
 document.getElementById("picture2").style.filter = "hue-rotate(340deg)"
}

  var hoverElements = document.getElementsByClassName('picture');

function unhoverStyle() {
    document.getElementById("picture1").style.filter = "";
 document.getElementById("picture2").style.filter = "";
}

Is there a way to hover one element and to style many others with pure css/js?

1 Answers1