ホバーリンク上でCSSの宣言が機能しない

Question

私はこのナビゲーションリンクを持っており、最後のリンク（ボタンとしてスタイル指定されています）をホバリングすると、ホバー上にブラウンの代わりにカラーピンクのボトムボーダーのプロパティを持っています赤い色のボタン。あなたの助けに感謝します。前もって感謝します！ここで

.header-nav a:hover { 
    border-bottom: 5px solid rgb(56,47,50); /*brown border-bottom*/ 
} 

.header-nav a:last-of-type:hover { 
    border-bottom: 5px solid rgb(255,144,171); /*pink-border-bottom*/ 
} 

     <nav class="container header-nav"> 
      <ul> 
       <li><a href="#">Home</a></li> 
       <li><a href="#cupcakes">Cupcakes</a></li> 
       <li><a href="#cakes">Cakes</a></li> 
       <li><a href="#events">Events</a></li> 
       <li><a href="#contacts" class="btn nav-btn">Order Now!</a></li> 
      </ul> 
      <br> 
     </nav> 

はフィドルです： https://jsfiddle.net/ssqLspsn/

Answer 1

i DID IT !!! https://jsfiddle.net/Please_Reply/9hk6okpd/2/希望これはあなたが欲しいものです！

.header-nav a:hover { 
    border-bottom: 5px solid rgb(56,47,50); /*brown border-bottom*/ 
} 

.header-nav .btn:hover { 
    border-bottom: 5px solid rgb(255,144,171); /*pink-border-bottom*/ 
} 

Answer 2

が、私はそれをやりました！ここを見てくださいhttps://jsfiddle.net/Please_Reply/9hk6okpd/2/希望これはあなたが欲しいものです！

.header-nav a:hover { 
    border-bottom: 5px solid rgb(56,47,50); /*brown border-bottom*/ 
} 

.header-nav .btn:hover { 
    border-bottom: 5px solid rgb(255,144,171); /*pink-border-bottom*/ 
} 

Answer 3

は、多分あなたはホバー属性を持つようにされ、最後のLiのIDやクラス名を入れて、CSSコードに特定のID :)

Answer 4

ホバーに適用されるCSSチェックする際に行うための最善のことを行いますコンソールからアクティブです。 これは、インスペクタに行くことで、FirefoxとChromeの両方で実行できます。あなたは間違った要素にスタイルを適用している場合、CSSは動作しませんので、あなたも、あなたのhtmlを掲載場合、それは役立つだろう、あなたの特定の問題についてはここで はホバー属性 See :hover state in Chrome Developer Tools

を有効にする方法を見てのガイドです。

.header-nav li:hover { 
    border-bottom: 5px solid rgb(56,47,50); /*brown border-bottom*/ 
} 

.header-nav li:last-of-type:hover { 
    border-bottom: 5px solid rgb(255,144,171); /*pink-border-bottom*/ 
} 

Good Luck！あなたのCSSセレクタを維持したい場合は

Answer 5

あなたはCSS （最後の要素）ボタンにいくつかのクラスを配置しようとするとは

<div class="header-nav"> 
<a>some text</a> 
<a>some text</a> 
<a class="btn">some text</a> 
</div> 

のようなCSS

header-nav .btn:hover { 
    border-bottom: 5px solid rgb(255,144,171); /*pink-border-bottom*/ 
} 

ものの結構ですliを選択してください。a Raplace .header-nav a:last-of-type:hoverとを選択しないでください。