HTML当鼠标经过图片上的文字时显示另一张图片，求代码
1个回答
展开全部
<!--
<html>
<head>
<title>代码</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<script type="text/javascript" src="js/jquery-1.10.1.js"></script>
<script>
$(function()
{
$("p").mouseover(function()
{
var url=$(this).find("img").attr("src");
url="url("+url+") no-repeat";
$(".content").css("background",url).css("background-position","50%").css("background-size","contain");
});
});
</script>
</head>
<style type="text/css">
.bottle{
position: relative;
width:800px;
height:800px;
margin:0 auto;
margin-top:100px;
}
.content{
height: 300px;
width: 300px;
position: absolute;
background: url(imgs/1.jpg) no-repeat;
background-size: contain;
margin-left:250px;
top: 100px;
}
p img{
width:80px;
height:80px;
}
.p1{
position:absolute;
left:573px;
top:343px}
.p2{
position:absolute;
left:158px;
top:169px}
.p3{
position:absolute;
left:568px;
top:58px
}
</style>
<body>
<div class="bottle">
<div class="content"></div>
<p class="p1"><img src="imgs/0.jpg" ></p>
<p class="p2"><img src="imgs/1.jpg" ></p>
<p class="p3"><img src="imgs/2.jpg" ></p>
</div>
</body>
</html>
-->
去掉<!-- -->
<html>
<head>
<title>代码</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<script type="text/javascript" src="js/jquery-1.10.1.js"></script>
<script>
$(function()
{
$("p").mouseover(function()
{
var url=$(this).find("img").attr("src");
url="url("+url+") no-repeat";
$(".content").css("background",url).css("background-position","50%").css("background-size","contain");
});
});
</script>
</head>
<style type="text/css">
.bottle{
position: relative;
width:800px;
height:800px;
margin:0 auto;
margin-top:100px;
}
.content{
height: 300px;
width: 300px;
position: absolute;
background: url(imgs/1.jpg) no-repeat;
background-size: contain;
margin-left:250px;
top: 100px;
}
p img{
width:80px;
height:80px;
}
.p1{
position:absolute;
left:573px;
top:343px}
.p2{
position:absolute;
left:158px;
top:169px}
.p3{
position:absolute;
left:568px;
top:58px
}
</style>
<body>
<div class="bottle">
<div class="content"></div>
<p class="p1"><img src="imgs/0.jpg" ></p>
<p class="p2"><img src="imgs/1.jpg" ></p>
<p class="p3"><img src="imgs/2.jpg" ></p>
</div>
</body>
</html>
-->
去掉<!-- -->
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
