如何用JavaScript/jQuery实现悬停顶部图片时背景图保持淡显

问题描述 #

我有一个带背景图的div，鼠标悬停时背景图变淡；同时悬停背景图时，同一容器内的第二个div图片（位于背景图上方）会渐显。点击顶部图片会触发JS代码，让一组社交图标滑入右侧。现在的问题是：用户悬停顶部图片并点击后，背景图不会保持淡显状态，但我需要它一直保持淡显。

因为HTML的div顺序限制，无法用纯CSS实现，且不能修改div顺序（修改后顶部图片无法在悬停时显示），试过多种JS和jQuery方案都没成功。

原始代码 #

JavaScript #

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

CSS #

.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%;
  }
}

HTML #

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

解决方案 #

核心思路是给背景图添加一个持久化类来保持淡显状态，通过JS根据社交图标的显示/隐藏状态切换这个类：

修改后的CSS #

新增.faded类，和hover状态共同控制透明度：

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

/* 同时保留hover和新增的faded类控制淡显 */
.fading-image.faded,
.fading-image:hover {
  opacity: 0.5;
}

/* 其余CSS代码不变 */
.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%;
  }
}

修改后的JavaScript #

在函数中获取背景图元素，根据社交图标状态添加/移除.faded类：

function myFunction() {
  var x = document.getElementById("hidden-social");
  // 获取背景图元素
  const fadingImage = document.querySelector('.fading-image');
  
  x.addEventListener("animationend", function(e) {
    e.preventDefault();
    if (x.style.animationName == "slide-left") {
      x.style.display = "none";
      // 社交图标隐藏时移除淡显类
      fadingImage.classList.remove('faded');
    }
  });
  
  if (x.style.display === "none") {
    x.style.display = "block";
    x.style.animation = "1s slide-right";
    // 社交图标显示时添加淡显类
    fadingImage.classList.add('faded');
  } else {
    x.style.animation = "1s slide-left";
  }
}

说明 #

• hover状态仅在鼠标悬停时生效，点击后鼠标离开会恢复原状，用.faded类实现持久化淡显
• 社交图标滑入显示时，给背景图添加.faded类保持淡显
• 社交图标滑出隐藏时，移除.faded类，背景图恢复正常透明度

内容的提问来源于stack exchange，提问作者MC Squared