CSS3: изменить фоновое изображение страницы, если изображение наведено

Я пытаюсь изменить фоновое изображение страницы в зависимости от изображения.

Это макет страницы:

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" - это идентификатор, который я установил для тега.

Есть идеи?

Источник

2 ответа

Решение

Если вам нужно изменить background-image #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')");
})
Источник

Вы не можете пройти назад в селекторах 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 = '';
};
Источник
Другие вопросы по тегам