HTML 卡片 CSS 过渡答案

【问题标题】：HTML card CSS transitionHTML 卡片 CSS 过渡
【发布时间】：2020-01-14 14:50:35
【问题描述】：

我使用 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>

【问题讨论】：

是的，制定规则.bg:hover .text { top: 132px }

标签： html css transition

【解决方案1】：

将悬停移动到父级。例如。 .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>

【讨论】：

【解决方案2】：

您可以添加带有文本类 div 的兄弟 div 并为两个 div 添加父 div 并为父 div 编写转换，如下所示

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

        }
        .text{
            background-color: gray;
            position: relative;
        }

        .inner{
            height: 200px;
        }
        .outer{
            position: relative;
            top: 2px;
            transition: top 0.5s;
        }
        .outer:hover{
            top: -65px;
        }
    </style>



<div class="bg">
        <div class="outer">
            <div class="inner"></div>
            <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>
    </div>

【讨论】：

@Saubhagya 出于好奇，您为什么会接受这个要求您修改 DOM 结构并添加不必要的 HTML 元素和 CSS 规则的答案？

【解决方案3】：

这是因为您将选择器设置为.text:hover。这将默认将样式应用于被悬停的元素，即.text。

相反，您可以使用.bg:hover .text 来操作.text 元素。

【讨论】：

【解决方案4】：

试试这个：

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

【讨论】：

欢迎来到 Stack Overflow！我知道您可能想获得代表，但是您之前发布了一个确切的答案。如果已经有答案，请确保您添加的是不同的（有效的）。
哎呀，好像有人打败了我：/ 无论如何要删除我的帖子？
是的，我相信您的帖子下方有一个删除链接可供您使用。但是，既然你投了赞成票，你不妨把它留在这里。 :)

【解决方案5】：

悬停后只需传递.text 类即可激活像这样.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>

【讨论】：