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

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

来源

2012-11-10 Sreeram

为什么你标记你的问题“jQuery”？ – Bergi

错误控制台在Chrome中说什么？ – aorcsik

@fork：是的，这就是我问过的原因。 OP是否包含它但不使用它？或者他想使用但不知道如何？ – Bergi

-1

你最好使用jQuery的那种东西，应该在所有的浏览器。

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

来源

2012-11-10 12:10:36 fonZ

不一定。我对jQuery没有任何反应，但我们试着找出他现有的代码有什么问题。 –

@Asad我说“你好”，这基本上也意味着“不一定”。 – fonZ

@Asad他的代码在其他浏览器下工作没有任何问题。那么，你如何解决这些问题？你不能，你必须重新考虑它。这就是我的答案。 – fonZ

-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-10 12:14:19

您正在使用非常突兀的JavaScript，这根本就是不好的做法。因此，追查这个错误并没有多大意义。建议使用jQuery的人非常正确，你可以通过采纳这个建议来帮助你自己。

在DOM元素上直接使用onMouseOver和其他javascript不再是如何做的事情。

来源

2012-11-10 12:17:26

-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-10 12:17:44

我已经建议。 – fonZ

独立你的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。

来源

2012-11-10 14:05:36

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

回答

相关问题