テキストを含むボックス全体 (< div > で区切られている) をリンクとして機能させたいのですが、そのリンク内のテキストにもスタイルを設定したいと考えています。両方を取得できないようです:
(1)
HTML
<a href="#" onclick="toggle('category')"><div class="categoryName">Test</div></a>
CSS
.categoryName {
border: 1px solid black;
padding-left: 10px;
padding-bottom: 10px;
padding-top: 10px;
border-radius: 5px;
}
.categoryName a {
color: black;
text-decoration: none;
font-weight: bold;
}
この場合、ボックス全体 (縁取りされた < div >) がリンクとして機能しますが、テキスト "Test" はスタイル設定されていません (標準の Web リンクとして表示されます)。
(2)
HTML
<div class="categoryName"><a href="#" onclick="toggle('category')">Test</a></div>
CSSも同じ
この場合、テキストのスタイルが設定されていますが、ボックスはリンクとして機能せず、テキストのみとして機能します。
ボックスをリンクとして機能させ、テキストのスタイルを設定するにはどうすればよいですか?