テキストメニューとホバー画像の間の間隔を広げる方法は?
を追加しpadding-bottom: 12px
ます。を選択した値に変更12px
します。これにより、水平方向の間隔が調整されます。タグに追加0 bottom
しますbackground
。これにより、画像がリンクの下部に配置されます。
ホバーの長さをテキストに制限するには? 代わりにあなたをプロパティに
追加し、パディングを廃止してください。これは、背景画像の長さがテキストの長さと一致することを意味します。padding
margin
アクティブなページでホバーを表示したままにする方法は?
アクティブなページのホバーが表示されたままになるようにするには、現在のアクティブなページに のクラスを指定できますselected
。回答の下部にあるHTMLに示されているように。
CSS:
#menu {
float: right;
height: 30px;
margin: 62px 82px 12px 12px; /* Adjust margin to include the padding */
width: 530px;
}
#menu a {
color: black;
font-size: 15px;
font-weight: bold;
/* Remove your padding here. Has been adjusted in the margin */
padding-bottom: 12px; /* Adjust to change the hover spacing */
text-decoration: none;
}
#menu a:hover, #menu a.selected {
background: url(images/hover.png) repeat-x 0 bottom;
}
HTML (クラスの使用例selected
):
<div id="menu">
<a href="l1.html">Link 1</a>
<a href="l2.html" class="selected">Link 2</a>
<a href="l3.html">Link 3</a>
</div>