Question

我正在尝试根据悬停的图像更改页面的背景图像。

这是页面的布局： enter image description here

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。

有什么想法吗？

Answer 1

你不能在CSS选择器中向后遍历。也就是说，您不能根据子/后代的状态将样式应用于祖先/父级。

不幸的是，您需要使用JavaScript。您可以使用类并在CSS中定义样式，以减少它的跛足。像这样：

jsFiddle

<强> HTML

<div id="main">
    <div id="img1"></div>
    <div id="img2"></div>
</div>

<强> CSS

#main.img1 {
    background: url('https://www.google.com.au/images/srpr/logo4w.png');
}
#main.img2 {
    background: url('https://www.google.com.au/images/srpr/logo4w.png');
}
#img1,
#img2 {
    width:100px;
    height:100px;
    background-color:#F00;
    margin:10px;
}

<强>的JavaScript

var main = document.getElementById('main'),
    img1 = document.getElementById('img1'),
    img2 = document.getElementById('img2');

img1.onmouseover = function () {
    main.className = 'img1';
};
img2.onmouseover = function () {
    main.className = 'img2';
};
img1.onmouseout = function () {
    main.className = '';
};
img2.onmouseout = function () {
    main.className = '';
};

Answer 2

如果你需要更改#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：如果图像悬停，则更改页面背景图像

2 个答案: