0

liのインライン-sでWebページメニューを実装しulました。li色付きの境界線があり、が含まれていますa。onmousehover次に、内部のテキストの色を変更し、境界線を移動せずに上に移動するa必要があります。どうやってやるの？ 2pxli

4

2 に答える 2

3

秘訣は、マークアップの整合性を維持するために、上部のパディングを少し削除し、下部のパディングを少し増やすことです。

私はあなたが望むものの簡単な例を設定しました。こちらのフィドルで確認してください

HTML：

<ul>
  <li><a href="#">Home</a></li>
</ul>

CSS：

ul { width: 200px; margin: 20px; }
li { border-top: 2px #000 solid; padding: 5px; }

li a { padding: 5px; display: inline-block; }
li:hover a { padding: 3px 5px 7px 5px ; }
于 2011-11-21T07:39:39.607 に答える
1

これをCSSに追加します。

a:hover.jump {
            color: [Insert whatever];
            position: relative;
            bottom: 2px;
}

次に、リンクにクラスを追加します

<ul>
<li><a href="http://google.com" class="jump">My Link Text</a></li>
</ul>

ホバリングテキストに背景色やその他必要なものを追加できます。決まり文句の名前が付いているが非常に便利なウェブサイトCSSNinjaにはたくさんの例があります

于 2011-11-21T06:30:40.650 に答える