將鼠標懸停在另一幅圖像上時，如何使用 javascript 或 jquery 為圖像添加樣式？

Question

請參閱“ box5385.temp.domains/~atelifw5/test/ ”以供參考

我有一個包含在 hover 上淡出的背景圖像的 div。此外，當懸停背景圖像時，第二個 div 圖像（在同一容器內）過渡，位於背景圖像的頂部。 當您單擊頂部圖像時，它會運行一個 javascript，它會在最右側的一組社交媒體圖標中滑動。 我的問題是，當用戶將鼠標懸停在頂部圖像上以單擊它時，背景圖像不再褪色並且需要保持褪色狀態。

我不能使用 CSS 執行此操作，因為 html 中的 div 的順序不允許我這樣做，而且我無法更改順序，因為如果我更改順序，頂部圖像將不會出現在 hover 上。 我用 Javascript 和 Jquery 嘗試了很多事情，但都沒有成功。

我們將不勝感激。 下面是我的代碼：

function myFunction() {
  var x = document.getElementById("hidden-social");
  x.addEventListener("animationend", function(e) {
    e.preventDefault();
    if (x.style.animationName == "slide-left") {
      x.style.display = "none";
    }
  });
  if (x.style.display === "none") {
    x.style.display = "block";
    x.style.animation = "1s slide-right";
  } else {
    x.style.animation = "1s slide-left";
  }
}

.fading-image {
  opacity: 1;
  transition: opacity 1s;
}

.fading-image:hover {
  opacity: 0.5;
}

.cross-button {
  opacity: 0;
  transition: opacity 1s;
  cursor: pointer;
  position: relative;
  top: -50px;
  left: 325px;
}

.fading-image:hover~.cross-button,
.cross-button:hover {
  opacity: 1;
}

.social-icon-2 {
  width: 25px;
}

.social-icon-p2 {
  width: 15px;
}

#hidden-social-container {
  width: 200px;
  height: 32px;
  position: relative;
  top: -80px;
  left: 640px;
  overflow: hidden;
}

#hidden-social {
  width: 145px;
}

@keyframes slide-right {
  from {
    margin-left: -100%;
  }
  to {
    margin-left: 0%;
  }
}

@keyframes slide-left {
  from {
    margin-left: 0%;
  }
  to {
    margin-left: -100%;
  }
}

<div class="ev-fade">
  <div class="fading-image"><img src="http://box5385.temp.domains/~atelifw5/wp-            
content/uploads/2022/12/RO_PIX_EV_03.png">
  </div>

  <div class="cross-button" onclick="myFunction()"><img src="http://box5385.temp.domains/~atelifw5/wp-content/uploads/2022/12/cross.thin_.png">
  </div>
</div>


<div id="hidden-social-container">
  <div id="hidden-social" style="display:none;">

    <a href="https://instagram.com" target="blank"><img class="social-icon- 
2" src="http://box5385.temp.domains/~atelifw5/wp-content/uploads/2022/12/Instagram_Black.svg">
    </a>

    <a href="https://www.facebook.com/sharer/sharer.php? 
u=http://box5385.temp.domains/~atelifw5/east-village" target="blank"><img class="social-icon- 
2" src="http://box5385.temp.domains/~atelifw5/wp-content/uploads/2022/12/Facebook_Black.svg">
    </a>

    <a href="https://twitter.com/share?url=http://box5385.temp.domains/~atelifw5/east-village/" target="_blank">
      <img class="social-icon-2" src="http://box5385.temp.domains/~atelifw5/wp- 
content/uploads/2022/12/Facebook_Black.svg"></a>

    <a href="https://www.linkedin.com/shareArticle?url=http://box5385.temp.domains/~atelifw5/east- 
village" target="blank"><img class="social-icon- 
2" src="http://box5385.temp.domains/~atelifw5/wp-content/uploads/2022/12/LinkedIn_Black.svg">
    </a>

    <a href="https://pinterest.com/pin/create/button/" target="blank"><img class="social-icon- 
p2" src="http://box5385.temp.domains/~atelifw5/wp-content/uploads/2022/12/Pinterest_Black.svg">
    </a>
  </div>
</div>

Answer 1

我將課程更改為 Id 的。 並不是說有必要，但它只是在我解決這個問題的過程中發生的。 我唯一做的就是將下面的代碼添加到我的 javascript 代碼中。

document.getElementById("cross-button").onmouseover = function() {mouseOver()};
document.getElementById("cross-button").onmouseout = function() {mouseOut()};

function mouseOver() {
document.getElementById("fading-image").style.opacity = "0.5";
}

function mouseOut() {
document.getElementById("fading-image").style.opacity = "1";
}

document.getElementById("fading-image").onmouseover = function() {mouseOver()};
document.getElementById("fading-image").onmouseout = function() {mouseOut()};

function mouseOver() {
document.getElementById("fading-image").style.opacity = "0.5";
}

function mouseOut() {
document.getElementById("fading-image").style.opacity = "1";
}