2个回答
展开全部
鼠标放上之后，出现图片本身的文字说明。例如：
<img src="这里是图片地址" alt="这里是文字说明">这个现在不常用的。浏览器也不一定支持了。
那么第二种情况，就要用到JavaScript或者jQuery。JavaScript是一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。jQuery是一个轻量级的Javascript库。
例如如下代码（复制到到记事本保存为.html的后缀名即可预览）：
<html xmlns="
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>懒人原生鼠标悬停图片文字动画效果</title>
<style>
*{ margin:0; padding:0; list-style:none;}
img{ border:0;}
#lanrenzhijia{ height:auto; width:820px;margin:100px auto; overflow:hidden;}
#lanrenzhijia ul li{ width:396px; height:165px; overflow:hidden; float:left; margin:0px 10px 10px 0px; position:relative;}
#lanrenzhijia ul li .text{ width:100%; height:0; overflow:hidden; position:absolute; left:0; bottom:0; background:url(
) repeat; font-size:12px; color:#fff;}
#lanrenzhijia ul li .text p{text-align:left; color:#fff; line-height:180%; padding:5px 10px; clear:both}
#lanrenzhijia ul li .text b{ display:block; padding:5px 10px; display:block; float:left; background:#333; margin-bottom:5px;}
</style>
</head>
<body>
<!-- 代码部分begin -->
<div id="lanrenzhijia">
<ul>
<li>
<a href="
<div class="text">
<b>菜单导航</b>
<p>菜单导航栏目 - 是懒人之家下设的一个主要栏目，收集了大量互联网上的导航代码，内容涵盖量最广泛，最实用</p></div>
</li>
<li>
<a href="
<div class="text">
<b>tab标签</b>
<p>tab标签，是懒人之家下设的一个主要栏目，收集了大量互联网上的tab标签代码，内容涵盖量最广泛，最实用</p></div>
</li>
<li>
<a href="
<div class="text">
<b>QQ在线客服代码</b>
<p>在线客服 - 是懒人之家下设的一个主要栏目，收集了大量互联网上的在线客服代码，内容涵盖量最广泛，最实用</p></div>
</li>
<li>
<a href="
<div class="text">
<b>图片特效</b>
<p>图片特效 - 是懒人之家下设的一个主要栏目，收集了大量互联网上的图片特效代码，内容涵盖量最广泛，最实用</p></div>
</li>
</ul>
</div>
<script src="
<script>
$(function(){
$('#lanrenzhijia li').hover(function(){
$('.text',this).stop().animate({
height:'165px'
});
},function(){
$('.text',this).stop().animate({
height:'0'
});
});
});
</script>
<!-- 代码部分end -->
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
|
广告 您可能关注的内容 |
