CODEWITHSUNDEEP
javascripthtmlhover
xan
xan

Reputation: 4696

Custom mouse events on links

Please see this fiddle

If you hover your mouse exactly on the link, a different link appears. But different text is also appearing when you hover on left or right of the link. I want to make the hover effect only when it is being hovered on the exact link.

How can I do this?

My HTML code:

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

My Javascript code:

$('.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();
  });

Please see the fiddle to see the effect I'm referring to.

Upvotes: 0

Views: 109

Answers (4)

Givi
Givi

Reputation: 1734

Instead of using mouseenter event shortcut it would be better if you use event delegation and add event on "a" element like this...

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

Upvotes: 1

talles
talles

Reputation: 15096

In your js, bind your function to "#nav li a" instead.

Upvotes: 0

macool
macool

Reputation: 658

I guess i updated the fiddle. I just added this style:

#nav li {
  display: inline-block;
}

Upvotes: 0

Chase
Chase

Reputation: 29549

Try the following:

$('.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();
});

You want to initiate the hover events on the a tags rather than the lis themselves.

EXAMPLE

Upvotes: 0

Related Questions