时间戳

首页 > 解决方案 > CSS悬停影响两个div

html - CSS悬停影响两个div

问题描述

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

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

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

我试图在“阅读更多”文本中添加 :hover 语句，但它不起作用......

标签： htmlcss

解决方案

请参阅下面的代码。希望这可以帮助。

.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>

推荐阅读