Question

div css jquery 鼠标经过图片显示隐藏内容~求解！

如图所示：

Answer 1

如果不需要渐变等特殊效果的话，可以通过CSS实现。假设图片与文字都为ID选择器，图片选择器名称为a，文字选择器名称为b，则相关代码如下（图片宽度假设为100px*100px）：

CSS代码：
#a{
padding-top:1px;
background:url('0.jpg'); /*根据具体要求载入相关图片*/
width:100px;
height:100px;
}

#b{
display:none;
}

#a:hover #b{
display:block;
width:100px;
height:30px;
opacity:0.8; /*一些浏览器不支持该属性，可通过在background-image中加载透明png图片实现透明*/
background:#ccc; /*颜色可具体设置*/
margin-top:70px; /*这里根据具体情况设置留给#a图片显示的大小*/
text-align:center;
line-height:30px; /*使文字竖直居中*/
}

HTML代码：
<div>
<div id="a">
<div id="b">绝对文字
</div>
</div>

Answer 2

最简单的方法（CSS实现）：
html代码如下：
<a href="#" class="pic">
<img src="tupian.jpg" />
<span>绝对图片</span>
</a>
CSS如下(以图片宽度120px为例)：
.pic{display:block;position:relative;width:120px;height:120px;}
.pic span{display:none;position:absolute;left:0;bottom:0;height:20px;line-height:20px;background:#333;rgba(0,0,0,0.8)}
a.pic:hover{display:block;}

PS：其中的rgba属性为支持CSS3的浏览器显示的半透明效果，不支持则文字背景显示黑色 ，兼容所有浏览器

Answer 3

比如你的隐藏内容的div的id是 jueduitupian
那么就写css
#jueduitupian{display: none;}
#jueduitupian:hover{display: block;}
就可以了

Answer 4

是说有初始状态和鼠标经过状态吧。

原理：
鼠标经过时，背景图片改变位置。
a 必须为块，必须有宽高，超出隐藏。

如：
a//图片宽200px，高100px上下两个
a:hover//Y轴-50px开始显示