显示文本覆盖并在悬停时应用图像透明度答案

【问题标题】：Display text overlay and apply image transparency on hover显示文本覆盖并在悬停时应用图像透明度
【发布时间】：2019-11-22 00:25:37
【问题描述】：

我正在尝试使图像在悬停时半透明并显示否则设置为 display: none 的文本。目前，如果您将鼠标悬停在图像上，它会变为半透明（.single-image:hover 有效），但不会出现文本。当文本未设置为display: none 时，它位于左下角的图像上方。我以为既然是在图像上方，悬停伪类就会生效。我还尝试将 .attribution 的 z-index 设置为 1，但没有任何作用。

<div className="image-container">
    <a href={image.links.html} target="_blank" rel="noopener noreferrer">
       <img className="single-image" src={image.urls.regular} alt="" />
       <p className="attribution">Unsplash</p>
    </a>
 </div>

    .image-container {
      display: inline-block;
      position: relative;
    }

    /* Text */
    .attribution {
      display: none;
      color: white;
      position: absolute;
      bottom: 20px;
      left: 20px;
    }

    .attribution:hover {
      display: block;
    }

    .single-image {
      margin: 7px;
      height: 350px;
      width: 350px;
      object-fit: cover;
    }

    .single-image:hover {
      opacity: 0.7;
      transition: 0.5s;
    }

【问题讨论】：

标签： css

【解决方案1】：

您应该将 hover 函数移动到父 div。

将.attribution:hover 更改为.image-container:hover .attribution 并将.single-image:hover 更改为.image-container:hover .single-image。

奇怪的是，为了让它工作，你还需要为你的父 div 添加边框或背景色。（Here 是为什么）

我添加了透明色background-color: rgba(0, 0, 0, 0);。

.image-container {
  display: inline-block;
  position: relative;
  background-color: rgba(0, 0, 0, 0);
}

/* Text */
.attribution {
  display: none;
  color: white;
  position: absolute;
  bottom: 20px;
  left: 20px;
}

.image-container:hover .attribution {
  display: block;
}

.single-image {
  margin: 7px;
  height: 350px;
  width: 350px;
  object-fit: cover;
}

.image-container:hover .single-image {
  opacity: 0.7;
  transition: 0.5s;
}

<div class="image-container">
    <a href="#" target="_blank" rel="noopener noreferrer">
       <img class="single-image" src="https://upload.wikimedia.org/wikipedia/commons/2/22/Turkish_Van_Cat.jpg" alt="" />
       <p class="attribution">Kitten!</p>
    </a>
 </div>

【讨论】：

如果您还没有使用框架来执行此操作，您还应该将className 更改为class。无论如何，我添加了一个代码sn-p。

【解决方案2】：

.cont { 
    position: relative; 
    height: 150px;
    width: 150px;
    margin: 1em auto;
    background-color: red;
}
.layer { 
    position: relative; 
    height: 150px;
    width: 150px;
    color: Transparent;
}
.layer:hover { color: white; }
.cont:hover { background-color: blue;}

<div class="cont">
  <div class="layer">My cool Text</div>
</div>

为什么不将字体颜色设置为透明？这更容易。看我的小例子（2分钟解决方法......）

【讨论】：

【解决方案3】：

添加一些 javascript 以使文本显示以及图像消失。因为即使彼此重叠，也只有一个元素可以处于悬停状态。除非你乱用 js，否则你可能能够“破解”双悬停状态。

试试；

    <div className="image-container">
      <a href={image.links.html} target="_blank" rel="noopener noreferrer">
        <img className="single-image" src={image.urls.regular} alt="" />
        <p className="attribution">Unsplash</p>
      </a>
    </div>

.image-container {
  display: inline-block;
  text-align:center;
  position: relative;
  z-index:1;
  }

/* Text */
.attribution {
  display: none;
  color: white;
  position: absolute;
  z-index:3;
  bottom: 20px;
  left: 20px;
  }
.single-image {
  margin: 7px;
  height: 350px;
  width: 350px;
  object-fit: cover;
  z-index:2;
  }

.single-image:hover {
  opacity: 0.7;
  transition:opacity 0.5s ease-in-out;
  will-change:opacity;
  }

    <script>
    document.addEventListener(DOMContentLoaded,(e)=>{
    const img = document.getElementsByClassName('single-image')[0];
    const attrib = document.getElementsByClassName('attribution')[0]; 

     img.addEventListener('mouseover',(e)=>{
        img.style.opacity = '0.7';
        attrib.style.display = 'block';
     });

    });
    </script>

【讨论】：