有沒有辦法 hover 一個元素並使用純 css/js 設置許多其他元素的樣式？

Question

當我在 div 上進行 hover 時，我嘗試將 id 賦予我想要設置樣式的元素。 我給了 div 一個“onmouseover”屬性，其值為 function，它改變了元素的樣式，但它會永久改變它，即使我的鼠標不在元素上

<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)"
}

Answer 1

檢查這個

而這個

而且我相信發布太簡單了，您可以通過多一點搜索來找到它。 沒有冒犯的意思。 :D

Answer 2

添加 onmouseout 事件：

<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 = "";
}