Question

我的问题可能很简单。我目前有多个具有相同类的按钮。当您将鼠标悬停在该按钮上时，我希望显示一个div（.blockButtonTips），其中包含与该按钮相关的特定信息。

我现在的问题是，当我悬停一个按钮时，div会成功显示，但是对于我的所有按钮都会出现，而我只希望它显示为悬停的按钮。

我可以为每个.blockButtonTips添加一个唯一的标识符，但想知道我是否真的能够在没有它的情况下定位它？

CODE

        //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>

Answer 1

将对按钮中包含的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();
  }

Answer 2

将$(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()
}

Answer 3

使用
略微修改的防弹方法 .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) ); }

Jquery mouseenter和mouseleave应该只触发“active”.class

3 个答案: