将鼠标悬停在另一幅图像上时，如何使用 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";
}