HTML карта CSS переход

Question

Я создал карточку, используя 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>

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

Вы можете добавить родственный 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>

Answer 3

Просто передайте .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>

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

Answer 5

Это потому, что у вас селектор установлен на .text:hover. Это по умолчанию будет применять стили к элементу наведения, который является .text.

Вместо этого вы можете использовать .bg:hover .text для управления элементом .text.