ホームページ >ウェブフロントエンド >CSSチュートリアル >マウスがフィールド上を通過したときに下線CSSを実現するにはどうすればよいですか? (ナビゲーションバーコードの例)
Web ページのナビゲーション バー スタイルのデザインは特に重要ですが、どのようなスタイルが人々を輝かせることができるでしょうか?そこでこの記事では、マウスがナビゲーションを通過したときに下線を表示する特殊効果を紹介します。
CSS マウスで下線効果を実現する具体的なコード例は次のとおりです:
<div class="htmleaf-container"> <header class="header"> <div class="wrapper"> <h1 class="site-title">css鼠标经过出现下划线特效测试</h1> </div> <nav class="navigation"> <div class="wrapper"> <ul class="navigation-list ul-reset"> <li class="navigation-item ib"> <a href="#" class="navigation-link"> Home </a> </li> <li class="navigation-item ib"> <a href="#" class="navigation-link"> About </a> </li> <li class="navigation-item ib"> <a href="#" class="navigation-link"> Contact </a> </li> <li class="navigation-item ib"> <a href="#" class="navigation-link"> FAQ </a> </li> <li class="navigation-item ib"> <a href="#" class="navigation-link"> More </a> </li> </ul> </div> </nav> </header> <!-- /.header --> </div>
style.css コードは次のとおりです:
/* defaults */ body{ background: #494A5F; color: #D5D6E2; font-weight: 500; font-size: 1.05em; font-family: "Microsoft YaHei"," ","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, FreeSans, Arimo; } a{color: #2fa0ec;text-decoration: none;outline: none;} a:hover,a:focus{color:#74777b;} html, body { height: 100%; } html { box-sizing: border-box; font-size: 16px; } *, *:before, *:after { box-sizing: inherit; } body { margin: 0; line-height: 1.5; font-family: Roboto, Helvectica, Arial, sans-serif; /*color: #333;*/ } /* main ie fix */ main { display: block; } /* headers */ h1 { font-size: 2.2em; } h2 { font-size: 2em; } h3 { /*font-size: 1.8em;*/ } h4 { font-size: 1.6em; } h5 { font-size: 1.4em; } h6 { font-size: 1.2em; } /* anchor links */ a { color: #009688; } a:hover, a:active { text-decoration: none; } /* inline block */ .ib { display: -moz-inline-stack; display: inline-block; zoom: 1; *display: inline; vertical-align: top; } /* ul-reset */ .ul-reset { padding-left: 0; margin-top: 0; margin-bottom: 0; list-style: none; } /* wrapper */ .wrapper { width: 80%; margin-right: auto; margin-left: auto; padding-right: 20px; padding-left: 20px; } /* header */ .header { text-align: center; } /* navigation */ .navigation { background-color: #eee; font-weight: 700; } .navigation-list { font-size: 0; padding-top: 10px; padding-bottom: 10px; } .navigation-item { font-size: 1.2rem; } .navigation-link { display: block; position: relative; padding: 5px 20px; text-decoration: none; color: #333; -webkit-transition: color .2s ease-in-out; transition: color .2s ease-in-out; } .navigation-link:before { content: ""; position: absolute; bottom: 0; width: 0; border-bottom: solid 2px; } .navigation-link:before { left: 0; } .navigation-link:hover { color: #009688; } .navigation-link:hover:before { width: 100%; } .navigation-link:before { -webkit-transition: width .2s ease-in-out; transition: width .2s ease-in-out; } /* main */ .main { padding-top: 20px; padding-bottom: 20px; } .content-article { margin-top: 80px; } .content-article:first-child { margin-top: 0; } .content-article > h1:first-child { margin-top: 0; } /* media queries */ @media only screen and (max-width:1024px) { .wrapper { width: 90%; } }
ローカル テストの結果は次のスクリーンショットです:
この記事は CSS 下線と CSS マウスに関するものです。下線が表示されるときの特殊効果を紹介した後、困っている友人に役立つことを願っています。
注:
text-decoration 属性は、テキストに追加される装飾を指定します。装飾の色は「color」プロパティで設定します。このプロパティを使用すると、テキストに下線などの特定の効果を設定できます。子孫要素に独自の装飾がない場合、祖先要素に設定された装飾は子孫要素にも「拡張」されます。ユーザー エージェントはまばたきをサポートする必要はありません。
この属性の可能な値は次のとおりです:
none デフォルト。標準を定義するテキスト。
underline テキストの下の線を定義します。
overline テキスト上の線を定義します。
line-through テキストの下を通過する線を定義します。
blink 点滅するテキストを定義します。
inherit は、text-decoration 属性の値が親要素から継承される必要があることを指定します。
以上がマウスがフィールド上を通過したときに下線CSSを実現するにはどうすればよいですか? (ナビゲーションバーコードの例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。