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でスタイルを定義して、不自由さを軽減することができます. このようなもの：

jsフィドル

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 に答える