所有功能，事件等的瀏覽器兼容性代碼

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

所有功能，事件等的瀏覽器兼容性代碼

回答

相關問題