JavaScript - 如果鼠标悬停在父级上然后影响子级

Question

当鼠标在框上时，我试图在某些框内显示带有一些文本的 div。

我的问题是盒子容器 .card-indus 包含标题 .card-header 和要切换的文本 .text-image。因此，每当用户进入该文本图像的父框时，我想显示从 none 到 flex 的 .text-image。我该怎么做？

without text with text

谢谢!

HTML

            <div class="card-indus">
                <div class="card-header">
                    <p>Digital</p>
                </div>
                <div class="card-content">
                    <img src="../images/services/digital.jpeg">
                    <p class="text-image">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quia voluptatibus numquam eveniet doloremque dignissimos veniam.</p>
                </div>
            </div>
            <div class="card-indus">
                <div class="card-header">
                    <p>Healthcare</p>
                </div>
                <div class="card-content">
                    <img src="../images/services/healthcare.jpg">
                    <p class="text-image">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quia voluptatibus numquam eveniet doloremque dignissimos veniam.</p>
                </div>
            </div>

            <div class="card-indus">
                <div class="card-header">
                    <p>Industry</p>
                </div>
                <div class="card-content">
                    <img src="../images/services/industry.jpg">
                    <p class="text-image">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quia voluptatibus numquam eveniet doloremque dignissimos veniam.</p>
                </div>
            </div> 

CSS

.industries .container-industries .card-indus {
  position: relative;
  border: red solid 1px;
  color: white;
  max-height: 300px;
  overflow: hidden;
  height: 100%;
}

.industries .container-industries .card-indus img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;

}

.industries .container-industries .card-indus .text-image {
  display: none;
  position: absolute;
  color: red;
  left: 0;
  top: 0;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
}

Answer 1

你可以使用简单的 css 来做到这一点

.industries .container-industries .card-indus:hover .text-image {
  display: flex;
}

如果我误解了你想要的位置，你可以将 :hover 选择器移动到你想要的类上:)