css < a>标签与文本覆盖在图像上，悬停效果取消图像不透明度时，文本是悬停

8iwquhpp 于 2023-10-21 发布在其他

关注(0)|答案(2)|浏览(107)

(hard在标题中提到这个问题）
我有绝对标题覆盖图像的链接。我想改变图像的不透明度时，任何链接的一部分是悬停。我的问题是，当我悬停在覆盖的文本上时，它忽略了应用于图像的：hover状态。

.galleryItem img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 10px;
  filter: opacity(.7);
  transition: .3s;
}
.galleryItem a,
h4 {
  color: #f5f9e9;
  text-decoration: none;
}
.galleryItem img:hover {
  filter: opacity(1);
}
.galleryItem h4 {
  text-align: center;
  position: absolute;
  top: 41%;
  left: 50%;
  font-size: 1.3em;
  transform: translate(-50%, -50%);
  vertical-align: middle;
  z-index: 10;
  text-shadow: 0px 0px 10px black;
}

<div class="galleryItem">
  <a href="#">
    <h4>The Combinator</h4>
    <img src="img/fwaz.png">
  </a>
</div>

我不希望h4标签的不透明度发生任何变化。但同样，我确实需要悬停h3来保持我应用于悬停img的相同更改。

我根本不知道如何补救这个问题。

css

来源：https://stackoverflow.com/questions/77327553/a-tag-with-text-overlay-on-image-hover-effect-cancelling-image-opacity-when-t

2条答案

按热度按时间

slsn1g291#

在h4上尝试pointer-events: none;。

.galleryItem {
  height: 180px;
  border: 1px solid black;
  position: relative;
}
.galleryItem img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: opacity(.7);
  transition: .3s;
}
.galleryItem a, h4 {
  color: #f5f9e9;
  text-decoration: none;
}
.galleryItem img:hover {
  filter: opacity(1);
} 
.galleryItem h4 {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 1.3em;
  transform: translate(-50%, -50%);
  vertical-align: middle;
  z-index: 10;
  text-shadow: 0px 0px 10px black;
  pointer-events: none;
  margin: 0;
}

<div class="galleryItem">
  <a href="#">
    <h4>The Combinator</h4>
    <img src="https://picsum.photos/1000/360">                     
  </a>
</div>

展开查看全部

赞(0）回复(0）举报 2023-10-21

mfuanj7w2#

在父对象上使用悬停

悬停规则应该在 Package 所有内容的父级上。当parent被悬停时，子元素被样式化，在本例中是<img>。父级可以是galleryItem或a，以哪个更好。

.galleryItem:hover img {
    filter: opacity(1);
}

赞(0）回复(0）举报 2023-10-21

我来回答

css < a>标签与文本覆盖在图像上，悬停效果取消图像不透明度时，文本是悬停

2条答案

相关问题

热门标签

最新问答