图片Hover触发效果异常：仅需图片Hover时显示文本Div

问题根源在于：透明的.text元素虽然看不见，但依然占据页面空间，并且会响应鼠标的hover事件。你之前用:not(.text)没效果，是因为如果hover触发目标是父元素li，那么不管鼠标移到li里的哪个子元素（包括透明的.text），li都会进入hover状态，:not(.text)没法排除这种情况。

给你两个可行的解决方案：

方案一：让透明文本不接收鼠标事件 #

给.text添加pointer-events: none，这样它在透明状态下不会响应任何鼠标操作，只有hover到图片上时才会触发效果。如果文本显示后需要正常交互，再恢复鼠标事件即可。

示例代码 #

假设你的HTML结构是：

<ul>
  <li>
    <img src="your-img.png" alt="展示图片">
    <div class="text">需要显示的文本</div>
  </li>
</ul>

对应的CSS修改：

/* 初始状态：文本透明+不接收鼠标事件 */
.text {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  /* 你的其他样式：比如定位、字体样式等 */
}

/* 图片hover时的放大+圆角效果（保留你已实现的） */
li img:hover {
  transform: scale(1.1);
  border-radius: 8px;
  transition: all 0.3s ease;
}

/* hover图片时，让相邻的文本显示 */
li img:hover + .text {
  opacity: 1;
  pointer-events: auto; /* 可选：如果文本需要点击等交互，恢复鼠标事件 */
}

方案二：严格限定hover触发目标为图片 #

如果你之前写的是li:hover .text（hover父元素时触发文本显示），改成直接监听图片的hover事件，通过兄弟选择器控制文本样式，这样只有hover图片本身才会触发效果：

/* 替换你原来的li:hover .text */
li img:hover ~ .text {
  opacity: 1;
}

如果.text是img的直接相邻兄弟，用+选择器（和方案一一样）更精准。

内容的提问来源于stack exchange，提问作者ahmad fakher