0

我使用 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>
4

5 回答 5

1

您正在使用非常突兀的 javascript，这只是一种不好的做法。所以追踪错误没有多大意义。建议使用 jQuery 的人是非常正确的，采纳这个建议对你有好处。

直接在 DOM 元素上使用 onMouseOver 和其他 javascript 已经不再是事情了。

于 2012-11-10T12:17:26.187 回答
0

分离你的 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>​

工作示例小提琴。

于 2012-11-10T14:05:36.600 回答
-1

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

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

于 2012-11-10T12:10:36.167 回答
-1

尝试这个：

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>
于 2012-11-10T12:14:19.323 回答
-1

使用 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>
于 2012-11-10T12:17:44.830 回答