jquery - 在 div 悬停效果上显示图像

Question

有许多插件会在将鼠标悬停在图像上时显示图像标题(例如:http://tympanus.net/Tutorials/CaptionHoverEffects/index4.html)。

我想达到相反的效果，即当鼠标悬停在包含文本的 div 上时，图像应该出现。谁能帮我做同样的事情？

Answer 1

我假设您正在使用 html5，如果是这样，您应该使用适合您内容上下文的标签:

<figure>
    <img src="http://placekitten.com/200/100" />
    <figcaption>Test message</figcaption>
</figure>

和CSS

figure {
    position: relative;
    display: inline-block;
}

figcaption {
    display: none;
    position: absolute;
    left: 0;
    bottom: 5px;
    right: 0;
    background-color: rgba(0,0,0,.15);
}

figure:hover img {
    opacity: .7;
}

figure:hover figcaption {
    display: block;
}