HTML 卡片 CSS 过渡

Question

我用 HTML.The 文字 class div 创建了一张卡片，只有当文字 class div 是 hovered.How 时才会出现我可以更改吗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>

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

Answer 2

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

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

Answer 3

试试这个：

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

Answer 4

鼠标悬停后通过.textclass即可激活.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>

Answer 5

您可以添加带有文本 class div 的同级 div 并为两个 div 添加父级 div 并为父级 [=14 写入转换=]如下

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

HTML 卡片 CSS 过渡

HTML card CSS transition

html

css

transition