时间戳

首页 > 解决方案 > 将鼠标悬停在图像上时如何从页面中删除内容。每条内容都有自己的id

javascript - 将鼠标悬停在图像上时如何从页面中删除内容。每条内容都有自己的id

问题描述

问题儿童 工作儿童我的 html 页面上有 4 个不同的图像。当我将鼠标悬停在每个图像上时，会出现一个文本框。问题是其中一个框显示的内容覆盖了具有 100% 不透明度的图像，使得文本无法阅读。我的解决方案是写一些 JS 说

如果我将鼠标悬停在图像 2 上，则图像 3 和 4 的不透明度变为 0

我不是经验丰富的编码员，所以我确信一个简单的解决方案可以解决我的问题。

标签： javascript

解决方案

将此类添加到您的 css 文件中

.hide {
  opacity: 0!important;
}

将 id 选择器添加到您的 html img 标签

<img src="/..." id="imageOneID"/>
<img src="/..." id="imageTwoID"/>
<img src="/..." id="imageThreeID"/>
<img src="/..." id="imageFourID"/>

这就是javascript

// create an array of your images
const images = [
  document.getElementById('imageOneID'),
  document.getElementById('imageTwoID'),
  document.getElementById('imageThreeID'),
  document.getElementById('imageFourID')
];

// show the hovered image and hide others
images.forEach((singleImage,index) => {
  singleImage.addEventListener('mouseover', ()=>{
    singleImage.classList.remove('hide');
    images.forEach((_singleImage, _index) => {
      if (_index !== index) {
        _singleImage.classList.add('hide');
      }
    })
  })
})

推荐阅读