JavaScript实现鼠标悬停出现超链接文字，点击进入其他页面的代码
具体样式为上图，分成四块，鼠标停留在图片上会显示超链接文字，鼠标离开后超链接文字消失，只剩下图片，具体代码css实现也可以...
具体样式为上图，分成四块，鼠标停留在图片上会显示超链接文字，鼠标离开后超链接文字消失，只剩下图片，具体代码 css实现也可以
展开
1个回答
展开全部
效果你自己看吧，代码拷贝了就能用，记得引用jq文件
给你写了大概的功能，链接什么的，你自己加上就行，懒得找图片，直接用的背景色举例吧
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试</title>
<script src="jquery.min.js"></script>
<style>
.bg{margin:20px auto;width:400px; height:400px;}
.half{width:50%; height:50%;float:left;color:white;}
.half ul{display:none;}
.blue{background:blue;}
.green{background:green;}
.red{background:red;}
.orange{background:orange;}
</style>
<script type="text/javascript">
$(function(){
$(".half").each(function(index,element){
$(this).hover(function(){
$(this).children().show();
},function(){
$(this).children().hide();
})
})
})
</script>
</head>
<body>
<div class='bg'>
<div class='half blue'>
<ul>
<li><a href=''>测试测试连接1</a></li>
<li>测试测试连接2</li>
</ul>
</div>
<div class='half green'>
<ul>
<li>测试测试连接1</li>
<li>测试测试连接2</li>
</ul>
</div>
<div class='half red'>
<ul>
<li>测试测试连接1</li>
<li>测试测试连接2</li>
</ul>
</div>
<div class='half orange'>
<ul>
<li>测试测试连接1</li>
<li>测试测试连接2</li>
</ul>
</div>
</div>
</body>
</html>
给你写了大概的功能，链接什么的，你自己加上就行，懒得找图片，直接用的背景色举例吧
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试</title>
<script src="jquery.min.js"></script>
<style>
.bg{margin:20px auto;width:400px; height:400px;}
.half{width:50%; height:50%;float:left;color:white;}
.half ul{display:none;}
.blue{background:blue;}
.green{background:green;}
.red{background:red;}
.orange{background:orange;}
</style>
<script type="text/javascript">
$(function(){
$(".half").each(function(index,element){
$(this).hover(function(){
$(this).children().show();
},function(){
$(this).children().hide();
})
})
})
</script>
</head>
<body>
<div class='bg'>
<div class='half blue'>
<ul>
<li><a href=''>测试测试连接1</a></li>
<li>测试测试连接2</li>
</ul>
</div>
<div class='half green'>
<ul>
<li>测试测试连接1</li>
<li>测试测试连接2</li>
</ul>
</div>
<div class='half red'>
<ul>
<li>测试测试连接1</li>
<li>测试测试连接2</li>
</ul>
</div>
<div class='half orange'>
<ul>
<li>测试测试连接1</li>
<li>测试测试连接2</li>
</ul>
</div>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
