我正在尝试更改hover属性。

<代码>.PC-hover{显示：无；}.PC-content-image IMG：hover+.PC-hover{显示：块；}

<代码><；DIV类=“ profile-content ”>；<；DIV类=“ PC-hover ”>；{hover}<；/DIV>；<；DIV CLASS=“ PC-HEADER ”>；{HEAD}<；/DIV>；<；DIV类=“ PC内容”>；<；DIV类=“ PC-Content-Image ”>；<；IMG SRC=“ https：//via.placeholder.com/300 ” alt=“ Placeholder ”/>；<；/DIV>；<；DIV类=“ PC-content-text ”>；<；p>；{text}<；/p>；<；p>；{text2}<；/p>；<；/DIV>；<；/DIV>；<；/DIV>；

最初，.pc-hover { display: none; } .pc-content-image img:hover + .pc-hover { display: block; }不会显示，直到鼠标从<div class="profile-content"> <div class="pc-hover">{hover}</div> <div class="pc-header">{head}</div> <div class="pc-content"> <div class="pc-content-image"> <img src="https://via.placeholder.com/300" alt="placeholder" /> </div> <div class="pc-content-text"> <p>{text}</p> <p>{text2}</p> </div> </div> </div>中悬停图像。但当我将鼠标悬停在图像上时，什么也没有发生。

我已经看到了一些只使用CSS的参考，在另一个元素上显示DIV，但我不知道如何做到这一点。

尝试使用pc-hover和pc-content-image，但不起作用。

有办法实现这一点吗？感谢任何帮助，谢谢。

顺晟科技：

两个问题：

1. 相邻兄弟运算符（pc-hover）仅在兄弟元素位于HTML源中悬停元素之后时才起作用。所以在我的例子中，我把它移到了图像DIV的下面。

将悬停事件

2. 附加到~元素，该元素位于一个DIV中。该图像没有任何相邻的兄弟，因此您的CSS将无法工作。为此，我们必须侦听父+上的悬停，它是img的相邻兄弟。

我不确定前面是否有兄弟运算符否则，在CSS中，您必须使用flex和div.pc-content（例如），以便将隐藏的DIV放在源代码中图像下方的正确位置，但在输出中位于图像上方。

<代码>.PC-hover{显示：无；}.PC-content-image IMG：hover{游标：指针；边框：1px纯红色；}.PC-content-image：hover+.PC-hover{显示：块；身高：10rem；背景：红色；边距-底部：1rem；}

<代码><；DIV类=“ profile-content ”>；<；DIV CLASS=“ PC-HEADER ”>；{HEAD}<；/DIV>；<；DIV类=“ PC内容”>；<；DIV类=“ PC-Content-Image ”>；<；IMG SRC=“ https：//via.placeholder.com/100 ” alt=“ Placeholder ”/>；<；/DIV>；<；DIV类=“ PC-hover ”>；{hover}<；/DIV>；<；DIV类=“ PC-content-text ”>；<；p>；{text}<；/p>；<；p>；{text2}<；/p>；<；/DIV>；<；/DIV>；<；/DIV>；