0

画像を表示するために onmouseover と onmouseout を使用しましたが、クロムでは機能しません。この問題の解決策が必要です。

スクリプトは

<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の使用を提案した人は非常に正しいので、そのアドバイスを利用することで自分に有利になります。

onMouseOverやその他のJavaScriptをDOM要素で直接使用することは、もはや物事が行われる方法ではありません。

于 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>​

作業例 fiddle。

于 2012-11-10T14:05:36.600 に答える
-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 に答える
-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 に答える