JavaScript 鼠标悬停图片，显示隐藏文本
JavaScript 鼠标悬停图片，显示隐藏文本
Nian糕
修改于 2024-03-16 17:09:09
修改于 2024-03-16 17:09:09
当我们在浏览网页的时候，描述性的文本通常不会跟在图片之后，而是当我们将鼠标移至图片上时，才会将文本显示出来，这样的好处是，以突显图片为主，并节省布局空间
HTML 结构如下
<div id="content">
<ul>
<li>
<img src="images/n1.jpg" width="250" height="180">
<div class="tit">
<p>世界上最好的</p>
<p>Nian糕</p>
</div>
</li>
<li>
<img src="images/n2.jpg" width="250" height="180">
<div class="tit">
<p>世界上最好的</p>
<p>Nian糕</p>
</div>
</li>
<li>
<img src="images/n3.jpg" width="250" height="180">
<div class="tit">
<p>世界上最好的</p>
<p>Nian糕</p>
</div>
</li>
</ul>
</div>CSS 样式如下
*{margin:0px;padding:0px;}
#content{width:800px;height:180px;margin:200px auto 0px;border-bottom:1px solid #990033;}
#content ul{list-style:none;width:750px;height:180px;margin:auto;}
#content ul li{width:250px;height:180px;float:left;position:relative;overflow:hidden;}
#content ul li div.tit{width:250px;height:50px;position:absolute;left:0px;bottom:-50px;background:rgba(0,0,0,0.5);}
#content ul li div.tit p{color:#fff;text-align:center;margin:3px;font-family:"微软雅黑";}
#footer{width:800px;height:160px;}
#footer div.tel{width:100%;height:30px;color:#993300;font-size:12px;margin-left:40px;margin-top:10px;margin-bottom:20px;}
#footer div.tel p a{width:50px;height:32px;display:inline-block;vertical-align:middle;}
#footer div.detail{width:100%;height:50px;margin-left:40px;color:#993300;font-size:12px;}
#footer div.detail p{margin-top:5px;}
#footer div.detail p.curr{font-weight:bold;}
#footer div.footer-nav{width:280px;float:right;color:#993300;font-size:12px;}
#footer div.footer-nav ul li{list-style:none;float:left;margin-top:10px;}引入 jQuery 库，通过$(this)获取到鼠标所悬停的li元素， 第一个function实现了鼠标悬停在上面的效果，第二个function实现了鼠标离开之后的效果，并调用.animate()方法过渡平滑
<script src="js/jquery.js"></script>
<script>
$("#content ul li").hover(function(){//鼠标悬停在上面实现什么效果
$(this).find("div").stop().animate({
"bottom":"0px"
},1000);
},function(){//鼠标离开实现什么功能
$(this).find("div").stop().animate({
"bottom":"-50px"
},1000);
});
</script>
运行结果
本篇的内容到这里就全部结束了，源码我已经发到了 GitHub Source_code 上了，有需要的同学可自行下载，预览效果可点击 effect
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017.10.26 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读