我想实现鼠标落在一张图片上，这张图片就变成另外一张图片的效果，请问下我的代码哪里有问题
来源：2-1 div设置（上）
记号笔
2020-12-20 20:57:14
# 具体遇到的问题
我想实现鼠标落在一张图片上，这张图片就变成另外一张图片的效果，请问下我的代码哪里有问题
图片：1.jpg
图片：sprite1.png
代码：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.div1:hover{background-position: -1964px -145px}
.div2:hover{background-position: -1638px -145px}
</style>
</head>
<body background="C:/Users/Administrator/Desktop/1.jpg" style="background-repeat: no-repeat;">
<div class="div1" style=" background:url(C:/Users/Administrator/Desktop/sprite1.png)-1800px -145px no-repeat;height: 125px;width: 162px;">
</div>
<div class="div2" style=" background:url(C:/Users/Administrator/Desktop/sprite1.png)-2127px -145px no-repeat;height: 125px;width: 162px;">
</div>
</body>
</html>
1回答
-
同学，你好，同学将样式写在了style中，优先级会高于style中的样式，因此效果没有实现，同学可以将div的样式写在css中
参考代码：图片路径换成同学自己的即可
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.div1{
background:url('./images/sprite1.png')-1800px -145px no-repeat;
height: 125px;
width: 162px;
}
.div1:hover {
background:url('./images/sprite1.png');
background-position: -1964px -145px;
}
.div2{
background:url('./images/sprite1.png')-2127px -145px no-repeat;
height: 125px;
width: 162px;
}
.div2:hover {
background-position: -1638px -145px
}
</style>
</head>
<body background="./images/1.jpg" style="background-repeat: no-repeat;">
<div class="div1">
</div>
<div class="div2">
</div>
</body>
</html>
0
相似问题