悬停改变背景图像而不是背景颜色
有人可以请指导我这段代码。目前,当我将鼠标悬停在一个链接上时,它会更改另一个div上的背景颜色。我不想更改背景颜色,而想更换为其他背景图片。悬停改变背景图像而不是背景颜色
<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>
<script type="text/javascript">
$(document).ready(function() {
$("#div-1").hover(
function() {
$('#top_section').css("background", "#ff9900");
},
function() {
$('#top_section').css("background", "#ccc");
}
);
$("#div-2").hover(
function() {
$('#top_section').css("background", "red");
},
function() {
$('#top_section').css("background", "#ccc");
}
);
$("#div-3").hover(
function() {
$('#top_section').css("background", "yellow");
},
function() {
$('#top_section').css("background", "#ccc");
}
);
});
</script>
</head>
<body>
<a id="div-1" href="#"> Orange</a>
<a id="div-2" href="#">Red</a>
<a id="div-3" href="#">Yellow</a>
<div id="top_section" style="height:100px;width:100px;"></div>
</body>
</html>
我转产$('#top_section').css("background", "#ff9900");
到$('#top_section').css("background-image", "/images/image1.jpg");
,但没有发生的时候我将鼠标放在链接。 非常感谢你,
。
尝试改变$('#top_section').css("background-image", "/images/image1.jpg");
到$('#top_section').css("background-image", "url('/images/image1.jpg')");
谢谢。有用。当背景图像变化时,是否可以添加一点淡入淡出? – tony 2014-10-17 13:31:18
我认为你不能淡入/淡出使用'background-image' css属性设置的图像。如果您使用常规的'',您可以通过设置'opacity' css属性或使用jQuery的'fadeIn'和'fadeOut'来动画。由于加载图像可能需要一些时间,这可能会在视觉上干扰褪色,您可能需要预加载它们。 – ckuijjer 2014-10-17 14:28:40
感谢您的信息,也可能不希望对我使用的图像类型产生影响......在图像背景中,他们是(图形设计师)使用渐变背景,所以当它褪色 - 它像素化,看起来很糟糕......再次感谢 – tony 2014-10-17 14:44:35
由于/images/image1.jpg是你应该做以下德的网址:您需要围绕你的图片网址与url('...')
$('#top_section').css("background-image", "url(/images/image1.jpg)")
我假设的路径是不正确的。你可以试试这个代码:
$('#top_section').css("background-image", "url(../images/image1.jpg)")
或者摆脱混乱的,并使用CSS的一般兄弟选择...
#div-1:hover ~ #top_section {
background-image: url(/images/image1.jpg);
}
#div-2:hover ~ #top_section {
background-image: url(/images/image2.jpg);
}
...
你甚至可以缩短你的代码彼此的方式,使用data-
属性
<a id="div-1" href="#" data-image="/images/image1.jpg"> Orange</a>
<a id="div-2" href="#" data-image="/images/image2.jpg">Red</a>
<a id="div-3" href="#" data-image="/images/image3.jpg">Yellow</a>
<div id="top_section" style="height:100px;width:100px;"></div>
$(document).ready(function() {
$("div").hover(function() {
var img = $(this).attr('data-image'); // take the attribute value.
$('#top_section').css("background", "url(img)");
},
function() {
$('#top_section').css("background", "#ccc");
}
)}
你必须纠正:.css(“background-image”,“/images/image1.jpg”);'到'.css(“background-image”,“url('/ images/image1 .jpg')“);' – emmanuel 2014-10-17 12:09:49