3

この問題を解決するのを手伝ってくれることを願っていました。ホバーとテキストの間のスペースを広げたい。

画像：

例

#menu {
    float: right;
    height: 30px;
    margin: 50px 70px 0;
    width: 530px;
}

#menu a {
    color: black;
    font-size: 15px;
    font-weight: bold;
    padding: 12px 12px;
    text-decoration: none;
}

#menu a:hover {
    background: url(images/hover.png) repeat-x;
}

だから私の質問は：

  1. テキスト メニューとホバー thng の間の間隔を広げる方法は?
  2. ホバーの長さをテキストに合わせるには?
  3. アクティブなページでホバーを表示したままにする方法は?
4

5 に答える 5

1

背景画像の位置を変更する

background: url('images/hover.png') repeat-x 0 10px;

テキストの下のホバーの長さについて話しているのですか？「アクティブな」クラスを追加して、ホバーと同じ方法でスタイルを設定するか、:active を一緒に追加することができます#menu a:hover,#menu a:active

于 2013-07-15T12:59:14.277 に答える
1
  1. 試してみてくださいbackground-position。
  2. 画像をテキストの幅に合わせようとしている場合は、ホバリングを適用する場所にマージンとパディングのない要素を用意してください。
  3. アクティブな要素に追加のクラスを追加します: #menu a:hover, #menu a.active.
于 2013-07-15T13:01:38.500 に答える
1

  1. テキストメニューとホバー画像の間の間隔を広げる方法は?
    を追加しpadding-bottom: 12pxます。を選択した値に変更12pxします。これにより、水平方向の間隔が調整されます。タグに追加0 bottomしますbackground。これにより、画像がリンクの下部に配置されます。

  2. ホバーの長さをテキストに制限するには? 代わりにあなたをプロパティに
    追加し、パディングを廃止してください。これは、背景画像の長さがテキストの長さと一致することを意味します。paddingmargin

  3. アクティブなページでホバーを表示したままにする方法は?
    アクティブなページのホバーが表示されたままになるようにするには、現在のアクティブなページに のクラスを指定できます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>
于 2013-07-15T13:01:50.117 に答える
1
  1. あなたaの高さを与え、画像を一番下に配置します
  2. paddingto margin(要素の内側ではなく外側のスペース)を変更します。
  3. 次のような追加のクラスを作成します.focus
#menu a {
    color: black;
    font-size: 15px;
    font-weight: bold;
    display: inline-block;
    height: 60px;
    padding: 12px 12px 0 12px;
    text-decoration: none;
}

#menu a:hover {
    background: url(images/hover.png) bottom left repeat-x;
}

#menu a.focus {
    ... active link style
}
于 2013-07-15T13:02:02.300 に答える
1

これを使って：

#menu a {
    color: black;
    font-size: 15px;
    font-weight: bold;
    padding: 12px 12px;
    text-decoration: none;
    padding-bottom: 20px;
    background-postion-y: -10px; 
}
于 2013-07-15T13:21:16.150 に答える