Question

首先让我们提供一些背景信息：http://dev.eduantech.com/

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

无论如何，我想让你注意的是菜单，请注意如果你将鼠标悬停在li上，背景会变成蓝色，与文字相同，所以它不再具有可读性。此时文本应该变为白色，但直到您实际将鼠标放在文本顶部（这是实际的a标记）之后才会显示。

我怎样才能这样做，当我将鼠标悬停在li时，它实际上也会使文字变白。当然，使用jQuery可以很容易地实现这一点，但接下来是问题。

如何点击li时，它会开始向我发送a标记的值。换句话说，将整个li标记设为链接...

对于您感兴趣的人，我正在使用Statamic。

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

如果您需要我的代码的任何知识，您当然可以检查网站的来源和东西。 ;）

Answer 1

使用此

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

Answer 2

只需将a代码设为与li相同的尺寸：

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

您可能还想从li中移除填充，而是将其应用于a

Answer 3

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

点击此处查看此实验：http://jsfiddle.net/ypJ8Q/

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