我正在尝试根据悬停的图像更改页面的背景图像。
这是页面的布局:
HTML:
<div id="main">
<img id="img1" src="1.jpg" />
<img id="img2" src="2.jpg" />
</div>
CSS:
#img1:hover #main
{
background: url('images/1.jpg'); /* not working */
}
#img2:hover #main
{
background: url('images/2.jpg'); /* not working */
}
'#main'是我为标签设置的ID。
有什么想法吗？
最佳答案
如果您需要更改#main div 的背景图像，您应该使用 CSS 和 jQuery:
http://jsfiddle.net/Soldier/cyAXv/1/
HTML
<body>
<div id="main">
<h1>Hi!</h1>
<img id="img1" src="img1"/>
<img id="img2" src="img2"/>
</div>
</body>
JS
$('#img1').hover(function() {
$('#main').css("background","url('background1')");
})
$('#img2').hover(function() {
$('#main').css("background","url('background2')");
})
关于CSS3 : Change Page Background Image if Image is Hovered，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15727200/