使完整的<li>块表现为链接</li>

Question

我有以下<li>，我希望整个li充当链接。目前，只有span中的文本充当链接。此外，是否可以在悬停时更改文本的颜色。当我将鼠标悬停在文本上时，我的代码只会更改文本的颜色，但当我将其悬停在块中的其他位置时，我的代码会保持不变。任何帮助表示赞赏。

我把演示放在jsfiddle上：http://jsfiddle.net/noscirre/JtVGp/4/

Answer 1

试试这个

http://jsfiddle.net/Bongs/JtVGp/5/

我已将链接添加到li以及链接...

HTML

<li class="app1"> 
  <a title href="#" class="blocklink">
        <span>ANOTHER APP</span>
  </a> 
</li>

CSS

.app1 {position:relative;}
.blocklink{position:absolute;top:0px;left:0px;width:100%;height:100%;}​

Answer 2

关于更改颜色，请更改

中的最后一个CSS条目

#app-container ul.apps li:hover a:hover { color: #fff; }

到

#app-container ul.apps li.app1:hover a { color: #fff; }

要使整个<li>框的行为类似于链接，您可以通过JavaScript添加onclick处理程序，例如：

var li = document.querySelector( '#app-container .app1' );

li.addEventListener( 'click', function(){
   window.location = 'your/new/url';
} );

并且可能使用cursor: pointer（MDN link）更改光标属性。

Answer 3

只需将此样式添加到导航中：

ul.menu > li > a {
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

此解决方案不考虑内部的span标记。 HTML看起来像这样：

<ul class="menu">
    <li><a>Navigation Point 1</a></li>
    <li><a>Navigation Point 2</a></li>
</ul>