Question

我的照片顶部有透明覆盖物。如果我将鼠标悬停在它上面，我希望背景中的图像模糊，并且叠加层变得不透明。由于两个图层都在彼此之上，因此当我将鼠标悬停时，只有叠加层的不透明度会发生变化。如何在后台触发图像？

我的尝试：

<a class="icon" href="nettebad.html" >
        <img src="./web/nettebad1.jpg" width="300" height="250" />
        <div class="overlay">
            <h3>Lorem ipsum...</h3>
        </div>
    </div>

.icon {
    position: relative;
    text-align: center;
    float: left;
    width: 23%;
    height: 200px;
    margin-left: 10px;
    -webkit-transition: all 0.5s ease-in-out;
    text-align: center;
    text-decoration: none;
}

.icon .overlay {
    position: absolute;
    top: 0px;
    bottom: 0px;
    width: 290px;
    height: 240px;
    text-align: center;
    opacity: 0;
    display: block;
    color: black;
}

.icon .overlay:hover {
    opacity: 1;
}

.icon img:hover {
    -webkit-filter: blur(2px);
}

Answer 1

在:hover元素上设置.icon行为，并使用descendant selectors更新子项（.overlay和img）样式：

在父级.icon悬停时更改子项样式：

.icon:hover .overlay {
  opacity: 1;
}

.icon:hover img {
  -webkit-filter: blur(2px);
}

演示：

.icon {
  position: relative;
  text-align: center;
  float: left;
  width: 23%;
  height: 200px;
  margin-left: 10px;
  text-align: center;
  text-decoration: none;
  transition: all 0.5s ease-in-out;
}

.icon .overlay {
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 290px;
  height: 240px;
  text-align: center;
  opacity: 0;
  display: block;
  color: black;
  transition: inherit;
}

.icon img {
  transition: inherit;
}

.icon:hover .overlay {
  opacity: 1;
}

.icon:hover img {
  -webkit-filter: blur(2px);
}

<a class="icon" href="nettebad.html">
  <img src="http://data.whicdn.com/images/193303321/superthumb.jpg" width="300" height="250" />
  <div class="overlay">
    <h3>Lorem ipsum...</h3>
  </div>
</a>

CSS悬停效果＆amp;覆盖

1 个答案: