时间戳

首页 > 解决方案 > HTML 卡片 CSS 过渡

html - HTML 卡片 CSS 过渡

问题描述

我使用 HTML 创建了一张卡片。文本类 div 仅在文本类 div 悬停时出现。如何更改 HTML 和 CSS 以便在父 div 悬停时出现文本 div。

.bg {
  background-color: white;
  width: 200px;
  height: 300px;
  border: solid red 2px;
  overflow: hidden;
}

.text {
  background-color: gray;
  position: relative;
  top: 180px;
  transition: top 0.5s;
}

.text:hover {
  top: 132px
}
<div class="bg">
  <div class="text">
    <h3>Test text</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reiciendis voluptas pariatur qui aut animi molestiae quia veritatis culpa excepturi. Nesciunt optio ipsa molest</p>
  </div>
</div>

标签： htmlcsstransition

解决方案

将悬停移动到父级。例如.bg:hover > .text

.bg {
  background-color: white;
  width: 200px;
  height: 300px;
  border: solid red 2px;
  overflow: hidden;
}

.text {
  background-color: gray;
  position: relative;
  top: 180px;
  transition: top 0.5s;
}

.bg:hover > .text {
  top: 132px
}
<div class="bg">
  <div class="text">
    <h3>Test text</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reiciendis voluptas pariatur qui aut animi molestiae quia veritatis culpa excepturi. Nesciunt optio ipsa molest</p>
  </div>
</div>

推荐阅读