点击LI时点击链接

Question

好的，我有一个使用的列表布局，并希望在悬停时突出显示列表行。现在，这真的不是问题，因为我可以使用javascript来更改类，但是当悬停并单击时，我希望光标更改为指针，并且要跟随链接。

示例代码可以在此处找到：

http://sandman.net/test/hover_links.html

我还想仅在其中有合格链接时才突出LI。最好使用jQuery... 有什么想法吗？

--

我已编辑代码以纳入下面的建议，问题是当我单击LI内的其他项目时，click()动作会触发...

--

现在，我已编辑了代码。我为应该在单击时跟随的链接添加了一个类，然后在没有这个类的链接上添加了event.stopPropagation()，因此它们由浏览器相应地处理。

再次感谢！

- Sandman

Answer 1

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

- James

---

问题在于 - 当我点击LI中的其他链接时，此.click()函数会触发，例如，请再次查看页面，我已更改了代码。 - Sandman

Answer 2

这对我有用

$('#element li').hover(function() { 
        $(this).animate({ 
          backgroundColor: "#4CC9F2" 
        }, "normal") 
      }, function() { 
        $(this).animate({ 
          backgroundColor: "#34BFEC" 
        }, "normal") 
      });

我使用了 jquery.color.js 插件，它可以很好地实现悬停效果的颜色变化动画。

- ant