html - いっぱいにするリンクとして動作するブロック

Question

私は以下を持っています。全体をリンクとして動作させ<li>たいと思います。li現在、スパン内のテキストのみがリンクとして機能します。また、ホバー時にテキストの色を変更することは可能ですか。私のコードは、テキストの上にカーソルを置いたときにのみテキストの色を変更しますが、ブロック内の他の場所にカーソルを置いても同じままです。どんな助けでも大歓迎です。

私はデモを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

With respect to the changing color, change your last CSS entry from

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

to

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

To make the whole <li> box behave like a link, you can add an onclick handler via JavaScript to it, e.g., like this:

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

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

and maybe change the cursor attribute by using cursor: pointer (MDN link).

Answer 3

このスタイルをナビゲーションに追加するだけです:

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

このソリューションは、内部のスパン タグを考慮しません。HTML は次のようになります。

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