Html CSS悬停效果未在文本上触发

这是我正在进行的项目的一部分

我有一张使用CSS设置为灰度的图片，图片上有一些文本。将图像悬停在上方时，它会关闭灰度并隐藏文本。这几乎正是我想要的

我遇到的问题是，如果你在图像的中心滚动，不透明度为：0；文本是，它不会被视为悬停在图像上，这会将图像恢复为灰度

我为此绞尽脑汁了一整天，我不知道为什么

div.text:hover#单元格{
不透明度：1；
}

---

无法更正此问题。

如果我理解正确，您需要将悬停效果定位在图像的父对象上，而不是图像本身

旧选择器所做的只是在光标位于图像上方时锁定悬停效果。当你将鼠标悬停在文本上，这是一个块级别的元素，你实际上不再将鼠标悬停在img元素上，因此会失去它的悬停效果

以下是我更改的css：

div.cell:hover img {
    filter: none;
    -webkit-filter: grayscale(0);
    transition: opacity .2s ease-in-out;
    -moz-transition: opacity .2s ease-in-out;
    -webkit-transition: opacity .2s ease-in-out;
    opacity:1.0;
}

---

最后是小提琴：

没问题！我在回答中添加了更多的信息，以便更好地解释为什么会发生这种情况。