JQuery mousenter и mouseleave должны запускать только «активные» .class

Question

Моя проблема, вероятно, проста. В настоящее время у меня несколько кнопок с тем же классом. Когда вы наведете кнопку, я хочу, чтобы на экране появлялся div (.blockButtonTips), содержащий определенную информацию, связанную с кнопкой.

Моя проблема прямо сейчас заключается в том, что когда я нажимаю одну кнопку, div появляется успешно, однако она появляется для всех моих кнопок, тогда как я хочу, чтобы она отображалась только для кнопки, которая была нависшей.

Я мог бы добавить уникальный идентификатор для каждого .blockButtonTips, но задаюсь вопросом, может ли im реально настроить его без?

КОД

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

//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));   
}