javascript - JavaScript - 如果鼠标悬停在父级上，则影响子级

问题描述

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

我的问题是盒子容器.card-indus包含标题.card-header和要切换的文本.text-image。所以我想在用户进入该文本图像的父框时显示.text-image从none到。flex我怎样才能做到这一点？

没有文字有文字

谢谢你！

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%;
}

标签： javascriptcss

javascript - JavaScript - 如果鼠标悬停在父级上，则影响子级

问题描述

解决方案

推荐阅读