JavaScript-如果鼠标悬停在父对象上，则会影响子对象

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

我的问题是，box容器.card indus包含title.card头和toggle.text图像的文本。因此，每当用户在文本图像的父框中输入时，我想将.text图像从none显示到flex。我该怎么做

谢谢大家!

HTML

---

您可以使用简单的css实现这一点

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

---

如果我误解了你想要它的位置，你可以在你想要的类上移动：hover选择器：

@morphish的答案很好，但是我要提到的是，如果你通过不透明度而不是显示来切换可见性，你可以使用css转换来获得漂亮的动画/淡入效果：

.工业.集装箱工业.卡片工业.文本图像{ 显示：flex；/**默认情况下显示flex**/ 位置：绝对位置； 颜色：红色； 左：0； 排名：0； 对齐项目：居中； 证明内容：中心； 文本对齐：居中； 身高：100%； 不透明度：0；/**使文本不可见**/ 转换：.2s降低不透明度；/**设置不透明度值转换的速度**/ } .工业.集装箱工业.卡片工业：悬停.文本图像{ 不透明度：1；/**悬停时将不透明度设置为完全不透明度！**/ }

---

是的，容易多了！谢谢似乎我们也可以用CSS而不是JS做任何事情？你有什么反例吗？css选择器有一些限制，如果你悬停的div不是一个直接的父对象，那么用css就不可能做到这一点。但是，只要有可能，最好从vue的性能角度使用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%;
}

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