以前　[Cording] Divなどで囲ったボックス内すべてをリンク先として指定したい！
という記事を書いたのですが、Javascriptを使用することと、IEが未対応なことで仕事では使いにくいテクニックだったんですが、
見つけてしまいました！CSSだけで実装できるテクニック！！

こんな少しの工だけでできてしまうなんて・・・・・あんなに悩んでいたのに・・・・

では実装方法です。

HTML側

<div id="links">
    <ul>
      <li><a href="#" title="Text">Link Heading One
        <em>Description of link.</em>
        <span>Date posted</span></a></li>
      <li><a href="#" title="Text">Link Heading One
        <em>Description of link.</em>
        <span>Date posted</span></a></li>
    </ul>
  </div>

CSS側

#links ul {
        list-style-type: none;
        width: 400px;
} 

#links li {
        border: 1px dotted #999;
        border-width: 1px 0;
        margin: 5px 0;
}

#links li a {
        color: #990000;
        display: block;
        font: bold 120% Arial, Helvetica, sans-serif;
        padding: 5px;
        text-decoration: none;
}

 * html #links li a {  /* make hover effect work in IE */
	width: 400px;
}

#links li a:hover {
        background: #ffffcc;
}

#links a em {
        color: #333;
        display: block;
        font: normal 85% Verdana, Helvetica, sans-serif;
        line-height: 125%;
}

#links a span {
        color: #125F15;
        font: normal 70% Verdana, Helvetica, sans-serif;
        line-height: 150%;
}

IE用のハックが入っていますね

 * html #links li a {  /* make hover effect work in IE */
	width: 400px;
}

でもこれだけ。これだけで平気なの？？って感じですが、元ネタサイトのSmiley Cat Web Design様でDEMOを用意してくれています。
IEでアクセスしてみましょう～

見事実装できています！！
タグもきれいだし、これは実際使っていけそうです！！

タグ:, , , ,

関連する投稿