鼠标移上去出现显示层，并且出现在同一个div中

笑_tp笑

于 2015-08-19 15:58:39 发布

阅读量2.4k

点赞数 1

CC 4.0 BY-SA版权

本文介绍了一种通过JavaScript实现的图片悬停显示文字效果的方法，包括HTML结构、CSS样式和jQuery交互逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div class="a">

<img src="a.jpg" />

<div class="b" >

这里是图片的名字

</div>

<style>

.a{width:100px; height:100px; position:relative;}

.b{width:100px; height:20px; background:url(/https/blog.csdn.net/bg.png); position:absolute;left:0px; bottom:0px;display:none}

</style>

<script src="jquery.js"></script>

<script>

$(document).ready(function(){

$(".a").hover(function(){

$(this).find(".b").slideDown();

},function(){

$(this).find(".b").slideUp();

});

</script>