2

我的问题可能很简单。我目前有多个具有相同类的按钮。当您悬停按钮时，我希望显示一个包含与按钮相关的特定信息的 div (.blockButtonTips)。

我现在的问题是，当我悬停一个按钮时，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

发送$(this).find('.blockButtonTips') 到函数并使用它来显示或隐藏

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

//Toggle div animation
function circleTextShow(element) {
  element.show()
}

function circleTextHide(elementId) {
    element.hide()
}
于 2013-04-03T13:43:17.470 回答
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 回答