2

ホバーが機能しない。これを Firefox 19.0、Cometbird 11.0、Explorer 9 でテストしました。

私がテストした唯一のブラウザは Chrome 25 です。

このコードは何をしますか?

まず、マウスを要素 #wrap_req に合わせると、#wrap_req 内に html コンテンツを追加するように指示する関数が呼び出されます。

<span id='cancelReq' ></span>

そして、マウスが #cancelReq 要素にホバーすると、その要素の背景が変わる必要があります。

<script language="JavaScript">
    function mOver(x)
    {   
        var txt = 'cond1';      //let's say it this way to satisfies the IF

        if(txt == 'cond1')          
        {
            var txt2 = "<span id='cancelReq' ></span>";
            $('#wrap_req').html(txt2);
            $('#cancelReq').css('display', x);  

        }   
    }   
</script>

CSS

<style>
    #wrap_req{width:193px; margin:0 auto; border:1px solid red;}
    #cancelReq{display:none; background-image:url(../images/cancel.png); }  
    #cancelReq:hover{background-image:url(../images/cancel2.png);}  
</style>

HTML

<div id='wrap_req' onmouseover=\"mOver('block')\" onmouseout=\"mOver('none')\" >

</div>

以下のコードを IF ステートメント内の関数 mOver() に追加しようとしました。

alert() を追加すると、正常に動作します。背景画像が変わります。

しかし、その alert(); を使用する必要はありません。

$('#cancelReq').hover(                          
    function
    {           
        //alert('entered Friends');
        $('#cancelReq').css('background', '#eeeeee');
    }
);
4

1 に答える 1

0

まず、 addEventListenerメソッドまたは jQuery のonまたはliveを使用してイベントをバインドすることをお勧めします。インライン JavaScript を記述するよりも簡単でクリーンです。

あなたの問題は#cancelReq、動的に作成された DOM 要素であり、作成される前に.hoverイベントをバインドするという事実だと思います。jQuery の.live()メソッドを使用するか、DOM 要素の作成時にイベントをバインドできます。

span要素の背景の可視性と色を切り替えたいということを理解しましたか? その場合は、CSSのみを使用して管理できます。これは、コードのパフォーマンスと保守性に優れています。

于 2013-03-06T21:59:31.983 に答える