js 鼠标移动到某位置，某位置隐藏的图片就显示出来，当鼠标移走，图片又隐藏了。鼠标移动到其他地方，其他地方的图片又出现

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

图片是指什么,下面这个行不
<html><head>    <script type="text/javascript" src="jquery/jquery.js"></script>    <script type="text/javascript">        $(document).ready(function() {            $(".test").mouseover(function() {                $(this).addClass("img");            }).mouseout(function() {                $(this).removeClass("img");            });        });    </script>    <style type="text/css">        .test        {            width: 200px;            height: 60px;            border: 1px dotted #000000;        }        .img        {            background-image: url("http://www.tuge.com/App_Themes/Default/master/logo.png");            background-repeat: no-repeat;        }    </style></head><body>    <div class='test'>        移上来看看</div>    <div class='test'>        移上来看看</div>    <div class='test'>        移上来看看</div></body></html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{margin:0; padding:0;}
ul{list-style:none;}
ul li{float:left; width:100px; height:100px; border:1px solid #000; margin-right:10px; display:inline;}
</style>
</head><body>
    <div style="float:left; width:500px; height:1000px;">
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    </div>
    <div id="right" style="float:left;">
     <img width="200" height="200" style="display:none;" src="1.jpg" />
        <img width="200" height="200" style="display:none;" src="2.jpg" />
        <img width="200" height="200" style="display:none;" src="3.jpg" />
    </div>
    <script>
            var lis = document.getElementsByTagName('li'),
            len = lis.length,
            imgs = document.getElementById('right').getElementsByTagName('img');

            for(var i = 0; i < len; i++){
                !function(i){
                    lis[i].onmouseover = function(){
                        imgs[i].style.display = 'block';
                    };
lis[i].onmouseout = function(){
                        imgs[i].style.display = 'none';
                    };
                }(i)
            }
    </script>
</body>
</html>