Question

当鼠标进入图像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;
}

当鼠标悬停在图像上时，它没问题，但是当鼠标悬停在图像上并且也在鼠标上方（h3）时，不透明度返回到0 :(

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

Answer 1

像Kyle Hawk评论的那样。您只是告诉.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;
}

在图像悬停中显示div（css）

1 个答案: