Question

试图找到一种在悬停在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>

Answer 1

根据您的评论中的要求：

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>

使用css悬停li更改图像

1 个答案: