[英]Click link when clicking LI
Ok, I have this list layout that I use, and I want the list row to highlight when I hover it. 好的,我使用了此列表布局,并且希望将鼠标悬停时突出显示列表行。 Now, that's not a problem really, since I can use javascript to change classes for example, but I want the cursor to change to a pointer when hovering and when clicked, I want to follow the link within.
现在,这实际上不是问题,因为我可以使用javascript更改类,例如,但是我希望将鼠标悬停并单击时将光标更改为指针,因此我想跟踪其中的链接。
Example code can be found here: 示例代码可以在这里找到:
http://sandman.net/test/hover_links.html http://sandman.net/test/hover_links.html
I also want to highlight the LI only when there is an eligible link inside it. 我还想仅在其中有合格链接的情况下突出显示LI。 Preferably using jQuery... Any ideas?
最好使用jQuery ...有什么想法吗?
-- -
I've edited the code to incorporate the suggestion below, and the problem is that the click() action fires when I click other items inside the LI... 我已经编辑了代码以合并下面的建议,问题是当我单击LI内的其他项目时会触发click()操作。
-- -
Right, so now I've edited the code. 是的,所以现在我已经编辑了代码。 I've added a class to the link(s) that SHOULD be followed on click, and then a event.stopPropagation() on the links that does NOT have this class, so they are handeled by the browser accordingly.
我向单击后应遵循的链接添加了一个类,然后在不具有此类的链接上添加了event.stopPropagation(),因此浏览器会相应地对其进行处理。
Thanks again! 再次感谢!
jQuery('li:has(a)')
.css('cursor', 'pointer')
.hover(function(){
jQuery(this).addClass('highlight');
}, function(){
jQuery(this).removeClass('highlight');
})
.click(function(e){
if (e.target === this) {
window.location = jQuery('a', this).attr('href');
}
});
This worked for me 这对我有用
$('#element li').hover(function() {
$(this).animate({
backgroundColor: "#4CC9F2"
}, "normal")
}, function() {
$(this).animate({
backgroundColor: "#34BFEC"
}, "normal")
});
I used jquery.color.js
plugin it animates really nice hover effect color change 我使用了
jquery.color.js
插件,它为动画效果提供了很好的悬停效果
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.