0

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

这是页面的布局： 在此处输入图像描述

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。

有任何想法吗？

4

2 回答 2

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 = '';
};
于 2013-03-31T07:12:06.493 回答
1

如果您需要更改#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')");
})
于 2013-03-31T07:14:42.850 回答