Question

CSS如何实现鼠标悬停在图片上底部弹出文字内容？

Answer 1

实现鼠标悬停在图片上底部弹出文字内容的实现方法：
HTML代码:
<div id="wrapper">
<img src="http://placehold.it/300x200" class="hover" />
<p class="text">text</p>
</div>

CSS代码：
#wrapper .text {
position:relative;
bottom:30px;
left:0px;
visibility:hidden;
}

#wrapper:hover .text {
visibility:visible;
}

Answer 2

可以将文字和图片包含在a标签中。假设文字使用span 标签，在css中用display隐藏，然后使用a:hover span{display：block}显示

Answer 3

<script src="jquery.min.js"></script>
<style>
.div_1{width:200px;height:100px;border:1px #000 solid;position:relative}
.div_1 span{
width:200px;
height:30px;
background:#f9f9f9;
position:absolute;
top:-100px;
color:#000;
}
</style>
<div class="div_1">
<span>文字文字</span>
</div>
<script>
$(".div_1").bind({
mouseover:function(){$(".div_1 span").css("top","70px");},
mouseout:function(){$(".div_1 span").css("top","-100px");} ,
});
</script>