Question

我使用onmouseover和onmouseout来查看图片，但它不能用于chrome。需要解决这个问题。

脚本是

<script>
var img;

window.onload = function () {
      img = document.getElementById ("img");
   }
</script>

<img style= "position:absolute;TOP:90px; LEFT:185px;visibility:hidden;" 
     class="two" 
     id="img" 
     src="services/web2.png" 
     width="800" height="500" alt=""/>

 <div class="item home">
    <img src="imagess/bg_home.png" alt="" width="199" height="199" class="circle"/>
    <a href="#" class="icon"></a>
    <h2>IT</h2>
    <ul>
        <li>
           <a href="target4" 
              onMouseOver="img.style.visibility='visible'; img.src='services/web2.png'"
              onMouseOut="img.style.visibility='hidden';">Sales & Service</a>
        </li>
        <li>
            <a href="target5" 
               onMouseOver="img.style.visibility='visible'; img.src='services/web2.png'" 
               onMouseOut="img.style.visibility='hidden';">CCTV</a>
         </li>
         <li>
             <a href="target6" 
                onMouseOver="img.style.visibility='visible'; img.src='services/web2.png'"
                onMouseOut="img.style.visibility='hidden';">DVR</a>
         </li>
     </ul>
  </div>

Answer 1

你使用的是非常突兀的javascript，这简直就是不好的做法。因此，追踪错误并没有那么多意义。建议使用jQuery的人非常正确，你会帮自己一个忙接受这个建议。

直接在DOM元素上使用onMouseOver和其他javascript不再是事情的完成方式。

Answer 2

分开您的JavaScript

window.onload = function () {
    var img = document.getElementById('img'),
        links = ['target4', 'target5', 'target6'],
        i = links.length, e,
        over = function over(){
            img.style.visibility='visible';
            img.src='services/web2.png';
        },
        out = function out(){
            img.style.visibility='hidden';
        };

    while( --i >= 0 ){
        e = document.getElementById(links[i]);
        e.addEventListener('mouseover', over, false);
        e.addEventListener('mouseout', out, false);
    }
}

来自您的HTML

<img id="img" class="two" src="services/web2.png" alt=""/>

 <div class="item home">
    <img src="imagess/bg_home.png" alt="" width="199" height="199" class="circle"/>
    <a href="#" class="icon"></a>
    <h2>IT</h2>
    <ul>
        <li>
           <a id="target4" href="target4">Sales &amp; Service</a>
        </li>
        <li>
           <a id="target5" href="target5">CCTV</a>
         </li>
         <li>
           <a id="target6" href="target6">DVR</a>
         </li>
     </ul>
  </div>

工作example fiddle。

Answer 3

你最好将jQuery用于那种适用于所有浏览器的东西。

http://api.jquery.com/mouseover/

Answer 4

试试这个：

的CSS：

#img {
 position:absolute;
 top:90px;
 left:185px;
 visibility:hidden;
}

JS：

$(function(){

  var $img = $('#img');

  // selector container for image
  var $container = $('.item');

  $container.find('ul li a')
    .bind('mouseover', function(event) {

        var target = $(this).attr('href'); //if you need to differentiate

        $img
           .css('visibility', 'visible')
           .attr('src', 'services/web2.png');

    })
    .bind('mouseout', function(event) {

        var target = $(this).attr('href'); //if you need to differentiate

        $img
           .css('visibility', 'hidden');

    })
});

HTML：

<img class="two" id="img" src="services/web2.png" width="800" height="500" alt="" />
<div class="item home">
   <img src="imagess/bg_home.png" alt="" width="199" height="199" class="circle"/>
   <a href="#" class="icon"></a>
   <h2>IT</h2>
   <ul>
     <li><a href="target4">Sales & Service</a></li>
     <li><a href="target5">CCTV</a></li>
     <li><a href="target6">DVR</a></li>
   </ul>
</div>

Answer 5

使用jQuery！

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.6.2.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('li a').mouseenter(function () {
                $('li a').hide(1);
            }).mouseout(function () {
                $('li a').show(1);
            });
        });
    </script>
</head>
<body>
    <ul>
        <li><a id="link" href="http://www.tivo.com/">DVR</a></li>
    </ul>
</body>
</html>

所有功能，事件等的浏览器兼容性代码

5 个答案: