0

これは私が持っているものです

メイン Div 内のホーム ページの 4 つのボタンと背景画像。

達成したいこと

各ボタンのホバー時に、 のみを使用して背景画像を変更したいCSS。

HTMLある程度マークアップできます。

以下はプロトタイプです

私のHTML 

<div id="mainImage"><img class="style1" width="100%" height="100%"  /></div>
<div id="DwellRestBtn"><a href="Dwell & Rest.html">Four</a></div>
<div id="DwellRestBtn"><a href="Dwell & Rest.html">Three</a></div>
<div id="DwellRestBtn"><a href="Dwell & Rest.html">Two</a></div>
<div id="DwellRestBtn"><a href="Dwell & Rest.html">One</a></div>

私のCSS

.style1
{
    width:500px;
    height:500px;
}

.style1
{
content:url('http://www.audenaerde.org/tiger.jpg');
}
a:hover .style1
{
content:url('http://www.butterflypictures.net/images/morpho-butterfly.jpg');
}

メソッドがある場合css3、少なくとも最新のブラウザと互換性があるはずです。

4

1 に答える 1

3
  1. 一意であるはずの同じ ID 属性を持つ複数の要素があります。私はそれをクラスに変えました。
  2. 私の知る限り、現在の CSS では、画像がボタンの後ろにある (ボタンの前ではない) 場合に必要なことを行うことができますが、画像をボタンの前に視覚的に配置することはできます (ただし、DOM ではできません)。次に、一般的な兄弟セレクターを使用できます。

jsFiddle Demo

.DwellRestBtn:hover ~ #mainImage .style1
{
    background: url('http://www.butterflypictures.net/images/morpho-butterfly.jpg');
}
于 2013-09-06T08:13:36.893 に答える