CSSのみでのロールオーバーについて

質問

リストで並べてたテキストにマウスをのせると、別の箇所にある画像が変化するようにしたいのですが、CSSだけでできるでしょうか。
具体的には、A,B,C....というようにテキストのリストを並べて、Aというテキストにマウスを置くと、任意の場所にある画像がAの画像になり、同じようにBというテキストにマウスを置くと、今度はその画像がBの画像に変わるというものです。
Java scriptを使わずおこないたいためアドバイスいただけませんでしょうか。

回答No.2

rainbowsix · ベストアンサー

<div id="div1">
<ul>
<li id="li1"><a href="#">
test1
<img src="#" width="100" height="100" alt="test1" />
</a></li>
<li id="li2"><a href="#">
test2
<img src="#" width="100" height="100" alt="test2" />
</a></li>
<li id="li3"><a href="#">
test3
<img src="#" width="100" height="100" alt="test3" />
</a></li>
</ul>
</div>

#div1{
position:relative;
}
#div1 ul li a img{
position:absolute;
left:-9999px;
top:100px;
}
#div1 ul li#li1 a:hover img,
#div1 ul li#li2 a:hover img,
#div1 ul li#li3 a:hover img{
left:100px;
}

で、出来るはずなのですが・・・
FirefoxとOperaでは正常動作を確認。しかしお馬鹿なIEはこのCSSを読んでくれません^^;
なので実用的ではないですね・・・
誰か、IEでも動くようにCSSハック考えて欲しいです。というか私も気になるｗ

お礼

ありがとうございます。
非常に参考になりました。
やはりIEというのは厄介ですねｗ

回答No.5

rainbowsix

きましたっ！
ANo.2のrainbowsixです。

N_A_Oさんありがとうございます！
IEでも動くようになりましたっ！

参照リンクを元に、どの記述が必要だったかを突き止めました。
ANo.2に追加記述してIEでも動かすためには・・・

#div1 ul li a:hover{
background-color: #fff;
}

を追記するのです。
・・・何故っ！？

なぜこれで動くようになるのかは、皆目わかりません。
が、とりあえず問題解決、ですね^^;
私も大変勉強になりました。

回答No.4

N_A_O

ANo.2のCSSをIEで動作させるには。下記参照。
http://moneytreesystems.com/css/picpopup.html

回答No.3

ICHI-yan

http://www.lucky-bag.com/archives/2005/08/remote_rollover.html
http://www.k5.dion.ne.jp/~i-araki/css/onmouse.html
タイプが違うようですが、両方IEでも動きます。下のほうは文字同士でも文字とイメージでもイメージとイメージでもＯＫみたいです。

８００字では説明できません。ある程度ｃｓｓを理解していれば当てはめられると思います。両者ともポジションをうまく使っておられます。

回答No.1

noname#39970

対象の「装飾の仕方」を指示するのがCSSで、その項目に差し込んだり入れ替えたりするような方式ならば実現できる
が、全く違う、孤立した項目を別で操作するというのはCSSのみでは無理

の筈。

お礼

ありがとうございます。
CSSだけではやはり厳しいのかもしれませんね・・・。
もう少しいただける回答を粘ってみたいと思います＾＾