2

LIにカーソルを合わせたときにメイン画像を変更する方法を見つけようとしました

CSSのみを使用することを見て、<a>にカーソルを合わせてdivを表示します。これを機能させることができると思いましたが、divを移動すると、もちろん機能しなくなりました。

これが私がJavaScriptでそれを行う方法です-同じhtmlの純粋なCSSで同じことを行う方法を教えてもらえますか？

<html>
<head>
<script>
var myImages = {li1:"image1.jpg",li2:"image2.jpg",li3:"image3.jpg"};
window.onload=function() {
  var lis = document.getElementById('myList').getElementsByTagName('li');
  for (var i=0;i<lis.length;i++) {
    lis[i].onmouseover=function() {
       document.getElementById('image1').src=myImages[this.id];
    }
  }
}
</script>
</head>
<body>
<img id="image1" />
<ul id="myList">
<li id="li1">show image1</li>
<li id="li2">show image2</li>
<li id="li3">show image3</li>
</ul>
</body>
</html>
4

1 に答える 1

4

あなたのコメントで要求されたとおり：

http://jsfiddle.net/wjBjZ/

これは、要求どおりに動作するリストと画像を示す基本的な例です。微調整のためにポジショニングをいじってください。

コメントの実装

http://jsfiddle.net/QgJTN/2/

#main {
    position: absolute;
    top: 0px;
    left: 10px;
    border: solid 5px red;
}
#myList{
    background: #ccc;
    position: absolute;
    top:110px;
}
#myList span{
    cursor: pointer;
}
#myList img{
    display: none;
    width: 100px;
    height: 100px;
    position: absolute;
    top: -110px;
    left: 10px;
    border: solid 5px red;
}
#myList li:hover{
    background: #888;
}
#myList li:hover img{
    display:block;
}

HTML

<img id="main" src="http://lorempixel.com/100/100/abstract/" />
<ul id="myList">
    <li>
        <span>List Item One</span>
        <img src="http://lorempixel.com/100/100/abstract/" />
    </li>
    <li>
        <span>List Item Two</span>
        <img src="http://lorempixel.com/100/100/fashion/" />
    </li>
    <li><span>List Item Three</span>
        <img src="http://lorempixel.com/100/100/city/" />
    </li>
</ul>
于 2012-05-15T21:22:36.680 に答える