ホームページ  >  記事  >  ウェブフロントエンド  >  タグホバーイベントをトリガーし、element_html/css_WEB-ITnose の下部に青い下部ブロックを表示する方法

タグホバーイベントをトリガーし、element_html/css_WEB-ITnose の下部に青い下部ブロックを表示する方法

WBOY
WBOYオリジナル
2016-06-21 09:43:561899ブラウズ

a a a:hover html マウスホバー

表示されるレンダリングは次のとおりです。 [align=center]
[/align]

コードは次のとおりです。 style>
div.menu ul li a:hover
{
color: #000000; /* テキストの色 */
text-decoration: none; /* ハイパーリンクの下線を表示しません。 🎜>background-color:Blue;
background-repeat:no-repeat;
background-position:bottom; ここの設定は無効ですか? ?
高さ: 1px;
幅: 45px;




問題は、マウスがタイトルの上に移動すると、要素の下部ではなく上部に青い背景が表示されるかということです。
実行中のレンダリングは次のとおりです。




ディスカッションへの返信 (解決策)

li:hover border-bottom:3px Solid を使用できます。 blue;

background-position:bottom; //背景色ではなく、背景画像の位置です
height: 1px;//なぜここの高さが 1px なのでしょうか? ? width:45px;

1 階のメソッドを使用して、下の境界線を設定できます

アニメーション効果を与える URL もあります。Jquery 直接インターフェイス呼び出し

これ以上コードを記述する必要はありません

http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/


効果があります

の中で、background-position は背景画像の開始位置を設定します。また、background-repeat も設定していますが、これは役に立ちません。また、表示がブロックに設定されていない限り、a の高さと幅の設定も無効になります。

jquery を使用すると、非常に簡単に li の境界線を表示できます。
$("#ul li").hover(function(){
$(this).css(" border- bottom","1px 赤一色");
},function(){
$(this).css("border-bottom","none");
});

Still_melody、zhoufeng0401、dongjunhui2010
皆さん、ありがとうございます!

Still_melody,zhoufeng0401,dongjunhui2010
皆さん、ありがとうございました!
作成者への警告。a 要素に加えて、ブラウザによっては他の要素のホバーをサポートしていない可能性があります

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。