<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jquery之鼠标移动到图片上显示文字并且文字可以点击</title>
<style type="text/css">
*{padding:0px; margin:0px; list-style:none; text-decoration:none;}
ul{ width: 582px; height:373px; margin:0 auto; position:relative; top:100px; display:block;}
ul li,ul li img,ul li a{ width: 582px; height:373px;color:orange; position: absolute;}
ul li a{ display:none; font-family:"微软雅黑"; font-size:35px; line-height:373px; text-align:center; vertical-align:middle;}
ul li a:hover,ul li img:hover{ cursor: pointer; color: orange; background-color:blue; display: block;}
</style>
<script type="text/javascript" src=".../jquery-3.2.1/jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function(e) {
$("ul li").hover(
function(){
$(this).find("a").stop(true,true).show();
},function(){
$(this).find("a").stop(true,true).hide();
});
});
</script>
</head>
<body>
<ul>
<li>
<img src="image.jpg" alt="网站建设需求" />
<a href="http://blog.csdn.net/love_moon821?viewmode=contents">了解详细情况</a>
</li>
</ul>
</body>
</html>
389
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
