2

私の問題はおそらく単純です。現在、同じクラスのボタンが複数あります。ボタンにカーソルを合わせると、ボタンに関連する特定の情報を含む div (.blockButtonTips) が表示されるようにします。

私の問題は、1 つのボタンをホバーすると div が正常に表示されますが、すべてのボタンに表示されるのに対し、ホバーされているボタンにのみ表示されることです。

各 .blockButtonTips に一意の識別子を追加できますが、実際にそれなしでターゲットにできるかどうか疑問に思っていますか?

コード

        //MOUSEOVER
        $(".blockButton").mouseenter(function() {
            //Passing on .class div to a function
            circleTextShow(".blockButtonTips");
        })
        //MOUSEOUT
        $(".blockButton").mouseleave(function() {
            timer= setTimeout(function() {
                //Passing on .class div to dis-appear to a function
                circleTextHide(".blockButtonTips");
            }, delay);
        });

    //Toggle div animation
    function circleTextShow(elementId) {
//make div appear animation code
    }

    function circleTextHide(elementId) {
//make div dis-appear code
    }

HTML

<div class="blockButton">
    <div class="blockButtonTips">Text 1</div
</div>
<div class="blockButton">
    <div class="blockButtonTips">Text 2</div
</div>
<div class="blockButton">
    <div class="blockButtonTips">Text 3</div
</div>
4

3 に答える 3

3

ボタン内に含まれる div への参照を circleTextShow / Hide 関数に渡します。

//MOUSEOVER
        $(".blockButton").mouseenter(function() {
            //Passing on .class div to a function
            circleTextShow($(this).find('.blockButtonTips'));
        })
        //MOUSEOUT
        $(".blockButton").mouseleave(function() {
            var blockbutton = this;
            timer= setTimeout(function() {
                //Passing on .class div to dis-appear to a function
                circleTextHide($(blockbutton).find('.blockButtonTips'));
            }, delay);
        });

次に、関数内で次のようにヒントを参照できます。

  //Toggle div animation
  function circleTextShow(element) {
     //make div appear animation code
     $(element).show();
  }

  function circleTextHide(element) {
     //make div dis-appear code     
     $(element).hide();
  }
于 2013-04-03T13:42:28.770 に答える
0


.on([delegated events])、
Ternary operator (?:)、属性
inversed-hover-intentを使用し、関数内で を移動する、わずかに変更された防弾アプローチdata-*
setTimeout

この美しい結果が得られます:

LIVE DEMO

$(".blockButton").on('mouseenter mouseleave', function( e ) {
    var $tip = $('div', this); // Target the children .blockButtonTips 
    return e.type=="mouseenter" ? circleTextShow($tip) : circleTextHide($tip) ;
});

function circleTextShow( tip ) {
    clearTimeout( tip.data('wait') );
    tip.stop().fadeTo(500,1);
}

function circleTextHide( tip ) {
    tip.data('wait', setTimeout(function(){
       tip.stop().fadeTo(500,0);
    },300) );        
}
于 2013-04-03T13:54:37.860 に答える