在图像悬停（css）中显示 div [关闭]答案

【问题标题】：Show div in image hover (css) [closed]在图像悬停（css）中显示 div [关闭]
【发布时间】：2017-04-18 23:11:15
【问题描述】：

当鼠标进入图像 div 时，我正在使用此代码显示一些文本：

col-1-1.mydiv-image:hover +.mydiv-title h3 {
background: linear-gradient( rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45));
opacity:1;
display:block;
transition: all 0.5s ease;
}

当鼠标悬停在图像上时没关系，但是当鼠标悬停在图像上并且还悬停在 tite (h3) 上时，不透明度返回 0 :(

这是一个简短的视频，可以更好地理解:) https://drive.google.com/file/d/0B554jP6zQzw-am83N2JHZnlWVWs/view

【问题讨论】：

你能发布你的html结构吗？
这些对你有帮助.. stackoverflow.com/questions/28164320/css-hover-image-show-div stackoverflow.com/questions/15339182/… stackoverflow.com/questions/25285403/…
当您将鼠标悬停在图像上时，可能正在发生的事情是显示 .mydiv-title h3。当您的鼠标移到 .mydiv-title 上时，它不再“悬停”在图像上，因此不再应用该样式。这是我对正在发生的事情的猜测。

标签： css hover

【解决方案1】：

就像凯尔霍克评论的那样。您只是告诉.mydiv-title h3 在您将鼠标悬停在图像上时显示。当鼠标悬停在.mydiv-title h3 上时，鼠标不再位于图像上方，而是位于h3 上方。

要解决此问题，您只需将.mydiv-title h3:hover 添加到您的代码中即可。

col-1-1.mydiv-image:hover + .mydiv-title h3,
.mydiv-title h3:hover {
    background: linear-gradient( rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45));
    opacity:1;
    display:block;
    transition: all 0.5s ease;
}

【讨论】：