jquery - 使锚标记的“hitbox”与整个 li 的宽度相同

Question

首先让我们提供一些上下文：http ://dev.eduantech.com/

有我目前正在开发的新网站的预览。:) 无耻的自我推销。;P

无论如何，我希望你把注意力放在菜单上，注意如果你将鼠标悬停在li背景上会变成蓝色，与文本相同，所以它不再可读。此时文本应该变为白色，但直到您将鼠标实际放在文本顶部（这是实际的a标签）之前它才会变为白色。

我怎样才能做到这一点，以便当我将鼠标悬停在li它实际上使文本变白时。当然，这可以通过 jQuery 轻松实现，但接下来的问题就来了。

我怎样才能做到这一点，以便当我单击li它时它开始将我发送到a标签的值。换句话说，让整个li标签成为一个链接......

对于有兴趣的你，我正在使用Statamic。

同样，这可能都可以通过一些简单/困难的 jQuery 来实现，无法想象没有 jQuery (*shivers*)。

如果您需要任何关于我的代码的知识，您当然可以查看网站的源代码和资料。;)

score 2 · Accepted Answer

Just make your a tag the same size as the li:

div#sidebar nav ul li a{
    width: 100%;
    display: block;
}

You may also want to remove the padding from the li and instead apply it to the a

score 2 · Accepted Answer

2

用这个

#menu ul li:hover a{color:#FFF;}

于 2013-05-13T13:05:29.577 回答

score 1 · Accepted Answer

最干净的方法是让 li 标签重定向到锚标签的 URL。这样，即使您想在 li 中包含其他元素，您也可以单击整个 li 元素。

在这里检查这个实验：http: //jsfiddle.net/ypJ8Q/

$("#clickable").click(function() {
    window.location.href = $(this).children('a').attr('href');
});

3 回答 3