JavaScript实现鼠标悬停出现超链接文字，点击进入其他页面的代码
具体样式为上图，分成四块，鼠标停留在图片上会显示超链接文字，鼠标离开后超链接文字消失，只剩下图片，具体代码css实现也可以...
具体样式为上图，分成四块，鼠标停留在图片上会显示超链接文字，鼠标离开后超链接文字消失，只剩下图片，具体代码
css实现也可以 展开
css实现也可以 展开
2个回答
展开全部
效果你自己看吧，代码拷贝了就能用，记得引用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>
更多追问追答
追问
您好，您写的很好，但是和我的意思稍微有点偏差，我的意思一张图，分四块显示超链接文字，而不是4张图每张图都有特效，一张图有特效分4个位置显示超链接文字，上面的表述有问题给您造成了麻烦，希望您在帮我改一下，初学JS我不敢动您写的代码，谢谢啦
追答
js不用动，直接给bg加个背景图就好了，就是包着四个div的那个大的div,里面的四个div只保留一个half的样式就可以了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!DOCTYPE html>
<html>
<style>
.mask-div{position:absolute;background:coral;opacity:0.8;top:60px;display:none;width:100px;color:white;}
.img-div{ position:relative;display:inline-block; }
.img-div:hover div{display:block;}
</style>
<body>
<div style="background:gray;display:inline-block;">
<div>
<div class="img-div">
<a href="#"><img border="0" src="/images/pulpit.jpg" alt="Pulpit rock" title="图片1" width="100" ></a>
<div class="mask-div"><a href="#">超链接</a></div>
</div>
<div class="img-div">
<img border="0" src="/images/pulpit.jpg" alt="Pulpit rock" title="图片1" width="100" >
<div class="mask-div">超链接</div>
</div>
</div>
<div>
<div class="img-div">
<img border="0" src="/images/pulpit.jpg" alt="Pulpit rock" title="图片1" width="100" >
<div class="mask-div">超链接</div>
</div>
<div class="img-div">
<img border="0" src="/images/pulpit.jpg" alt="Pulpit rock" title="图片1" width="100" >
<div class="mask-div">超链接</div>
</div>
</div>
</div>
</body>
</html>
// 悬停 一个是title 显示你的描述。 第二个 浮层显示能点击超链接跳转页面。 第三 你能点击图片跳转页面 。 框架给你写好了。 具体什么颜色 你自己可以搞。 自己换个图片。 第一个图片写的比较完整。 你自己看一下就知道了。
<html>
<style>
.mask-div{position:absolute;background:coral;opacity:0.8;top:60px;display:none;width:100px;color:white;}
.img-div{ position:relative;display:inline-block; }
.img-div:hover div{display:block;}
</style>
<body>
<div style="background:gray;display:inline-block;">
<div>
<div class="img-div">
<a href="#"><img border="0" src="/images/pulpit.jpg" alt="Pulpit rock" title="图片1" width="100" ></a>
<div class="mask-div"><a href="#">超链接</a></div>
</div>
<div class="img-div">
<img border="0" src="/images/pulpit.jpg" alt="Pulpit rock" title="图片1" width="100" >
<div class="mask-div">超链接</div>
</div>
</div>
<div>
<div class="img-div">
<img border="0" src="/images/pulpit.jpg" alt="Pulpit rock" title="图片1" width="100" >
<div class="mask-div">超链接</div>
</div>
<div class="img-div">
<img border="0" src="/images/pulpit.jpg" alt="Pulpit rock" title="图片1" width="100" >
<div class="mask-div">超链接</div>
</div>
</div>
</div>
</body>
</html>
// 悬停 一个是title 显示你的描述。 第二个 浮层显示能点击超链接跳转页面。 第三 你能点击图片跳转页面 。 框架给你写好了。 具体什么颜色 你自己可以搞。 自己换个图片。 第一个图片写的比较完整。 你自己看一下就知道了。
追问
您好，您的代码我试了，效果不好，可以直接复制吧
追答
你描述的不够精确我只能给你思路。具体的还要你自己写。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
