悬停时背景图像变化 [英] background-image change on hover
本文介绍了悬停时背景图像变化的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在创建一个菜单，该菜单会在悬停时更改背景.您可以在JSFiddle上看到示例 .
I am creating a menu, which changes background on hover. You can see the example on JSFiddle.
在JSFiddle中运行时，一切都很好.但是，当我尝试在我的网站中使用此代码时，它将失败.
Everything is fine, when it is running in JSFiddle. But, when I trying to use this code in my website, it fails.
这是我的代码:
<html>
<head>
<title>Sample</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style>
body {
background: #ccc;
transition:0.5s;
}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function () {
$("#div-1").hover(
function () {
$('body').css("background", "#ff9900");
},
function () {
$('body').css("background", "#ccc");
}
);
$("#div-2").hover(
function () {
$('body').css("background", "red");
},
function () {
$('body').css("background", "#ccc");
}
);
$("#div-3").hover(
function () {
$('body').css("background", "yellow");
},
function () {
$('body').css("background", "#ccc");
}
);
}
</script>
<a id="div-1" href="#"> Orange</a>
<a id="div-2" href="#">Red</a>
<a id="div-3" href="#">Yellow</a>
</body>
</html>
任何人都可以知道，我在做什么错了吗?
Can anyone have any idea, what am I doing wrong?
推荐答案
您缺少结束符);使用notepad ++进行了检查，它现在可以正常工作.
You are missing the closing ); Checked this with notepad++ and it's working now.
<html>
<head>
<title>Sample</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style>
body {
background: #ccc;
transition:0.5s;
}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function () {
$("#div-1").hover(
function () {
$('body').css("background", "#ff9900");
},
function () {
$('body').css("background", "#ccc");
}
);
$("#div-2").hover(
function () {
$('body').css("background", "red");
},
function () {
$('body').css("background", "#ccc");
}
);
$("#div-3").hover(
function () {
$('body').css("background", "yellow");
},
function () {
$('body').css("background", "#ccc");
}
);
});
</script>
<a id="div-1" href="#"> Orange</a>
<a id="div-2" href="#">Red</a>
<a id="div-3" href="#">Yellow</a>
</body>
</html>
这篇关于悬停时背景图像变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
