如何使用以下命令創建導航：hover和.active

所以我想在我的導航欄中將當前頁面的下劃線和顏色設爲紅色。紅色框ix我的當前頁面，如果我將頁面更改爲例如：需要紅色/下劃線的工作。我試圖把codepen.io不好使用它，所以沒有工作。 Example 如何使用以下命令創建導航：hover和.active

My code: 

    HTML 
    <div class="full-header"> 
      <div class="header"> 
       <div class="nav"> 
        <ul> 
         <li><a href="index.html">Home</a></li> 
         <li><a href="#">Work</a></li> 
         <li><a href="#">About Me</a></li> 
         <li><a href="#">Contact</a></li> 
        </ul> 
       </div> 
      </div> 
      <p class="header-text">May I introduce my self?</p> 
      <hr class="line"> 
      <h2 class="header-text-small">front End Developer</h2> 
      <div class="button">Aphryv</div> 
     </div> 

    CSS 

    .full-header { 
     width: 100%; 
     height: 500px; 
     background: url(img/header-bg.jpg) no-repeat center center fixed; 
     -webkit-background-size: cover; 
     -moz-background-size: cover; 
     -o-background-size: cover; 
     background-size: cover; 
    } 

    .header { 
     width: 75%; 
     height: 60px; 
     margin: 0 auto; 
     /*background: rgba(0, 0, 0, 0.45);*/ 
    } 

    .nav { 
     text-align: right; 
    } 

    .nav ul { 

    } 

    .nav ul li { 
     display: inline; 
     padding: 20px 10px; 
     line-height: 55px; 
    } 

    .nav ul li a { 
     text-decoration: none; 
     color: #fff; 
     font-family: 'Arial', sans-serif; 
     font-size: 24px; 
    } 

    .nav ul li a:hover { 
     color: red; 
    }

來源

2015-07-19 Aphryv

你的問題還不清楚。把它放到像codepen.io這樣的網站上可能會有幫助，所以你可以輕鬆地分享一個工作（或者說，失敗）的例子。 – thomasfuchs

可能的重複 - http://stackoverflow.com/questions/26088986/highlight-current-link-with-css-or-js –

@Paulie_D我希望我能解決我的問題只是HTML/CSS（沒有學習JavaScript然而） – Aphryv

對於大型網站，JavaScript是一種最佳的解決方案。

但是，對於只有幾頁的小型網站，則存在HTML/CSS解決方案。

如果這是你的菜單

<ul> 
<li><a href="index.html">Home</a></li> 
<li><a href="#">Work</a></li> 
<li><a href="#">About Me</a></li> 
<li><a href="#">Contact</a></li> 
</ul>

然後一切必要每個頁面上是分配一類的，比方說，「當前」的列表項（或鏈接），適用於頁。

所以對於「工作」頁面：

<ul> 
<li><a href="index.html">Home</a></li> 
<li class="current"><a href="#">Work</a></li> 
<li><a href="#">About Me</a></li> 
<li><a href="#">Contact</a></li> 
</ul>

然後你的CSS會。

li.current a { 
color:red; 
text-decoraton:underline; 
}

來源

2015-07-19 16:49:04

添加一個簡單的類每個頁面的body標籤，例如：

<body class="navMain"> 
<body class="navWork"> 
<body class="navAboutme"> 
<body class="navContact">

然後加入另一類到每一個環節：

<li><a href="index.html" class="highMain">Home</a></li> 
<li><a href="#" class="highWork">Work</a></li> 
<li><a href="#" class="highAboutme">About Me</a></li> 
<li><a href="#" class="highContact">Contact</a></li>

最後寫一些CSS是僅在用戶處於同一頁面時才鎖定每個鏈接：

.navMain .highMain .nav ul li, .navWork .highWork .nav ul li, .navAboutme .highAboutme .nav ul li, .navContact .highContact .nav ul li {border: 1px solid red;}

我已經詳細闡述了CSS以供您理解。

希望這會有幫助

來源

2015-07-19 17:07:29 cab

如何使用以下命令創建導航：hover和.active

回答

相關問題