0

少し問題があります。onmouseoutイベントのイベントで関数を呼び出していますが、正常に動作しますが、 innerHTML. 以下は私の機能です：

function rvrtImg(id) {
  alert(id);
  if(id=="img1") {
    alert(id)
    document.getElementById(id).innerHTML = "<img src='<?php echo     
        get_bloginfo('template_directory')?>/img/paging/1.png' />"; 
  }
}

ここで、私はそれを呼んでいます

<a href="#"  id="img1" onmouseover="repImg(this.id)" onmouseout="rvrtImg(this.id)">hello</a>

アラートのみが機能していますが、内部の HTML は変更されていません

4

2 に答える 2

0

これは、画像がアンカーの現在のサイズよりも大きいためです。これにより、マウスアウトが正しくトリガーされなくなります。

これが実際の例です：（CSSへの注意） http://jsfiddle.net/QQSLC/16/

<a href="#" id="img1" onmouseover="repImg(this.id)" onmouseout="rvrtImg(this.id)">hello with lower size than image</a>
<a href="#" id="img2" onmouseover="repImg(this.id)" onmouseout="rvrtImg(this.id)">hello with higher size than image</a>

a {
    background: green;
}
#img2{
    background: red;
    width: 300px;
    height: 120px;
    display: block;
}

詳細については、次のとおりです。

自動サイズのアンカーがある場合、高さにはフォントの高さを使用し、幅には自動サイズを使用します。この場合、アンカーのサイズは約 100px X 23px であると考えてみましょう。次に、マウス アウト時に画像を読み込みます。これにより、アンカーの高さがその中の画像の高さに合わせて変更されるため、アンカーは 600px X 300px になります。このことが発生した場合、マウスはまだこの領域にあるため (23px から外れたため、現在は 300px です。したがって、マウスはまだそこにあります)、ブラウザはマウスオーバーを再度トリガーします。同時に、マウスオーバーコードによりアンカーの高さが23pxに変更されたため、マウスが再び出て、このループが永遠に続きます。この種のパラドックスを防ぐために、ブラウザーは、サイズが小さい要素でのマウスアウトを無視し、次にマウス オーバー サイズを無視することにしました。(CSS を実行するか、サイズを自動ではなく手動で変更するまで)

要素の上または左からマウスを移動すると、アンカーのサイズを変更してもこの 2 方向には影響しないため、マウス アウトが機能しないことに注意してください。

于 2013-01-30T19:39:20.730 に答える
0

ワードプレス？

<a href="#" id="img1" class="paging image1">hello</a>

jQuery を使用して、マウスオーバー/アウトを処理できます。

<script type="text/javascript">

jQuery( document ).ready( function( $ ) {

    $( 'a.paging.image1' ).hover(
        function() { $( this ).html( '<img src="hoverimage1.png" alt="" />' ); },
        function() { $( this ).html( '<img src="normalimage1.png" alt="" />' ); }
     );

} );

</script>
于 2013-01-30T19:12:24.803 に答える