javascript - レイヤーが重なっている場合、ホバーオブジェクトが背景/前景要素に2回表示されます

Question

この例をご覧ください: http://jsfiddle.net/AAd9b/1/

このオブジェクトにカーソルを合わせるたびに、重なっているオブジェクトが 2 回開きます。1 回だけフェードインし、すべてをマウスアウトするまでそこにとどまるようにするにはどうすればよいですか? したがって、背景または前景のオブジェクトの上にいるかどうかは問題ではありません。

Answer 1

.hover()2つの引数を取ります：handlerInとhandlerOut。コールバックを1つだけ指定すると、両方のイベントで呼び出されるため、イベントタイプを調べてfadeIn、fadeOut

http://api.jquery.com/hover/

あなたはおそらくこれを探しています：

$('.someclass').hover(
    function() {
        //-- mouseenter
    },
    function() {
        //-- mouseleave
    }
);

要素がマウスの下で点滅する理由は、 （技術的には、マウスがそのオブジェクトを離れたために）mouseleaveイベントをトリガーするためです。$('.someclass')これはトリッキーなシナリオです。おそらく、マウスがあなたの上にある間にイベントのバインドを解除して再バインドする必要があります<p>...またはいくつかの凝ったCSSのトリック。

または、これを試してください：http: //jsfiddle.net/UBdgz/

HTML：

<div class="wrapper">
    <div class="someclass">
        <a href="#">Hover Me</a>

    </div>
    <p>Only Once!</p>
</div>

JS：

var handleHover = function(evt) {
    switch (evt.type) {
        case 'mouseenter':
            $("p").fadeIn();
            break;
        case 'mouseleave':
            $("p").fadeOut();
            break;
    }
}
$(".wrapper").bind('mouseenter mouseleave', handleHover);