Question

我正在创建一个网站，它将对图像产生双重悬停效果。

首先图像的高度将缩小，其次图像上将出现“更多”文字。

我面临的问题是，当鼠标悬停在“阅读更多”文本上时，图像会返回到其完整高度...

我试图在“ Read More”-文本中添加：hover语句，但是它不起作用...

Answer 1

请参见下面的代码。希望这会有所帮助。

.image {
  display: inline-block;
  position: relative;
}

.image>img {
  width: 200px;
  height: auto;
  transition: width 0.5s;
}

.image>div {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate( -50%, -50%);
}

.image:hover>img {
  width: 100px;
}

.image:hover>div {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

<div class="image">
  <img src="https://via.placeholder.com/200x200">
  <div>Read more</div>
</div>

CSS悬停会影响两个div

1 个答案: