Пользовательские события мыши по ссылкам

Question

Please see this fiddle

Если вы наведите курсор мыши точно по ссылке, появляется другая ссылка. Но другой текст также появляется, когда вы наводите курсор слева или справа от ссылки. Я хочу сделать эффект зависания только тогда, когда он зависает по точной ссылке.

Как я могу это сделать?

HTML Мой код:

<ul id="nav"> 
    <li id="a1"><a href="#">original link 1</a></li> 
    <li id="a2" class="hack"><a href="#">hover link 1</a></li> 
    <li id="b1"><a href="#">original link 2</a></li> 
    <li id="b2" class="hack"><a href="#">hover link 2</a></li> 
    <li id="c1"><a href="#">original link 3</a></li> 
    <li id="c2" class="hack"><a href="#">hover link 3</a></li> 
</ul> 

Мой Javascript код:

$('.hack').hide(); 
$("#nav li").mouseenter(function() { 
    $('#' +this.id.charAt(0)+"2").show(); 
    $('#' +this.id.charAt(0)+"1").hide(); 
    }).mouseleave(function() { 
    $('#' +this.id.charAt(0)+"1").show(); 
    $('#' +this.id.charAt(0)+"2").hide(); 
    }); 

Пожалуйста, смотрите скрипку, чтобы увидеть эффект, я имею в виду.

Answer 1

Попробуйте следующее:

$('.hack').hide(); 
$("#nav li a").mouseenter(function() { 
    $('#' +this.parentNode.id.charAt(0)+"2").show(); 
    $('#' +this.parentNode.id.charAt(0)+"1").hide(); 
    }).mouseleave(function() { 
    $('#' +this.parentNode.id.charAt(0)+"1").show(); 
    $('#' +this.parentNode.id.charAt(0)+"2").hide(); 
}); 

Вы хотите чтобы инициировать события hover на тегах a, а не на li.

EXAMPLE

Answer 2

Вместо того, чтобы использовать событие MouseEnter ярлык, было бы лучше, если бы вы использовать делегирование событий и добавить событие на "a" элемент, как это ...

$("#nav li").on({ 
    "mouseenter" : function() { }, 
    "mouseleave" : function() { } 
}, "a"); 

Answer 3

Я думаю, я обновил скрипку. Я просто добавил этот стиль:

#nav li { 
    display: inline-block; 
} 

Answer 4

В ваших JS, связать вашу функцию "#nav li a" вместо.