滑鼠經過欄位時出現底線css怎麼實現？ （導覽列程式碼範例）

網頁上導覽列樣式的設計特別重要，那麼有哪些樣式可以令人眼前一亮呢？那麼這篇文章就跟大家介紹一種當滑鼠經過導航時出現下劃線的特效。

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" 屬性設定。這個屬性允許對文字設定某種效果，如加底線。如果後代元素沒有自己的裝飾，祖先元素上設置的裝飾會「延伸」到後代元素中。不要求用戶代理支援 blink。

此屬性所屬的可能值有：

none    預設。定義標準的文字。   

underline    定義文字下的一條線。   

overline    定義文字上的一條線。   

line-through    定義穿過文字下方的一條線。   

blink    定義閃爍的文字。   

inherit    規定應該從父元素繼承 text-decoration 屬性的值。   

#

以上是滑鼠經過欄位時出現底線css怎麼實現？ （導覽列程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！