html - 充实块充当链接

Question

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

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

Answer 1

试试这个

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

我已经在链接中添加了类，在链接中添加了一些 css 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>盒子表现得像一个链接，你可以onclick通过 JavaScript 向它添加一个处理程序，例如，像这样：

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

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

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

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>