Css悬停在图像上 - 加载div

Question

我想在悬停图像时做一个CSS效果.

当我将鼠标悬停在图像上时,我想显示包含文本等内容的div.

所以我想用这段代码做点什么:

<div id="image"><img src="image.png"/></div>

<div id="hover">Test message</div>

我试图在css显示中隐藏"悬停"div并在悬停时我试图将显示设置为阻止,但它不起作用...... :(

编辑:我想要图像上的文字.当我将鼠标悬停在图像上时,应该会有一些不透明度,但文字不应该接收到不透明度!

有没有办法做到这一点？

Answer 1

http://jsfiddle.net/ZSZQK/

#hover {
    display: none;
}

#image:hover + #hover {
    display: block;
}

只需保持简单,无需更改标记.

更新

如果你想在鼠标悬停时改变图像的不透明度,那么 http://jsfiddle.net/ZSZQK/4/

#hover {
    display: none;
    position: relative;
    top: -25px;
}

#image:hover {
    opacity: .7;
}

#image:hover + #hover {
    display: block;
}

更新2

由于您在初始问题中添加了更多要求,现在需要更改原始html标记.

我假设您正在使用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;
}

的jsfiddle