2

试图找到一种在将鼠标悬停在 LI 上时更改主图像的方法

查看Using only CSS, show div on hover over <a>我想我可以让它工作，但是当我移动 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 回答