鏈接上的自定義鼠標事件

如果將鼠標正好懸停在鏈接上，將出現不同的鏈接。但是，當您將鼠標懸停在鏈接的左側或右側時，也會顯示不同的文字。我只想在確切鏈接上進行懸停效果時才使用懸停效果。

我該怎麼做？

我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(); 
    });

請參閱小提琴，看我指的效果。

來源

2013-04-10 xan

嘗試以下操作：

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

你想在a標籤上啓動hover事件而非li本身。

EXAMPLE

來源

2013-04-10 01:03:41 Chase

而不是使用MouseEnter事件的快捷方式，如果你使用事件代表團這樣"a"元素添加事件會更好......

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

來源

2013-04-10 01:03:33 Givi

我想我更新了小提琴。我只是說這種風格：

#nav li { 
    display: inline-block; 
}

來源

2013-04-10 01:04:42 macool

在你的JS，你的功能結合到"#nav li a"代替。

來源

2013-04-10 01:06:14 talles

鏈接上的自定義鼠標事件

回答

相關問題