我想做一个悬停图像的 CSS 效果。
当我将鼠标悬停在图像上时，我想显示一个包含文本等内容的 div。
所以我想用这段代码做点什么：
<div id="image"><img src="image.png"/></div>
<div id="hover">Test message</div>
我试图在 css 显示中隐藏“悬停” div，在悬停时我试图将显示设置为阻止，但它不起作用...:(
编辑：我想要图片上的文字。当我将图像悬停时，它应该有一些不透明度，但文本不应该收到那种不透明度！
有什么方法可以做到吗？
【问题讨论】：
#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;
}
【讨论】：
你好，如果我理解正确，你想要这样的东西：
<div id="wrapper">
<div id="img-wrapper">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSp7bY6nYWTDmFXKSlP4TdCe5ghVQhbt85tQMS8dfZMEGw7QOXiLA">
</div>
<div id="text-wrapper">
<p>Hello world!</p>
</div>
</div>
CSS：
#wrapper{
position:relative;
border:1px solid black;
width:102px;
height:102px;
}
#text-wrapper{
position:absolute;
height:0px;
overflow:hidden;
font-size:14px;
font-family:Arial,Tahoma;
font-weight:bold;
transition: height 1s;
-moz-transition: height 1s; /* Firefox 4 */
-webkit-transition: height 1s; /* Safari and Chrome */
-o-transition: height 1s; /* Opera */
}
#img-wrapper:hover + #text-wrapper{
height:32px;
width:102px;
}
实现这一点的关键是这个 css 行：
#img-wrapper:hover + #text-wrapper{
它的实际作用是“当我将 img-wrapper div 悬停在 text-wrapper div 中时”
在这里查看演示：http://jsfiddle.net/A9pNg/1/
【讨论】：
这是我在谷歌上找到的解决方案
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style type="text/css">
#mybox {
width:80px;
height:90px;
float:left;
background-color:#0F9;
padding:10px;
}
.Imgdiv {
width:80px;
height:20px;
margin:0px 0px 10px 0px; padding:0px;
cursor:pointer;
background-color:#39C;
}
#mybox .hiddenDiv {
left:0px;
display:none;
z-index:100;
width:80px;
height:50px;
margin:0px;
background-color:#336;
float:left;
}
#mybox:hover .hiddenDiv {
display:block; top:0px; left:8px;
}
</style>
<body>
<div id="mybox">
<div class="Imgdiv"></div>
<div class="hiddenDiv"></div>
</div>
</body>
</html>
【讨论】：
没有 JavaScript 你可以这样做：
1.将#hoverdiv置于图片上方，设置opacity:0；
2.Than 添加到 css 中：
#hover:hover {
opacity:1
}
这应该可以解决您的问题。
【讨论】：
有很多方法可以做到这一点，但如果您想要仅使用 CSS 的方法，则需要将 html 重组为：
<div id="image">
<img src="image.png"/>
<div id="hover">Test message</div>
</div>
然后在你的 CSS 中默认隐藏消息：
#hover {display:none;}
然后显示消息：
#image:hover #hover {display:block;}
【讨论】：
试试：
<div id="image">
<img src="image.png"/>
<div class="hover">Test message</div>
</div>
CSS：
#image {
position:relative;
}
#image .hover {
display:none;
position:absolute;
bottom:0;
}
#image:hover .hover {
display:block;
}
基本上我所做的是：
#image div 内。id="hover" 更改为class="hover"
#image 悬停时添加display:block，如果没有悬停display:none。【讨论】：