上ボーダーカバーボーダーを完全に作成する

私はそれに3つのリンクがあるナビゲーションバーを持っています。あなたが注意深く見ると、ホバー上の暗い緑色の上ボーダーとアクティブなアンカーが茶色のボーダーをカバーしていないことがわかります。これを行うようにする方法はありますか？上ボーダーカバーボーダーを完全に作成する

次のようになります。

body { 
 
    font-family: 'Roboto', sans-serif; 
 
    font-weight: 300; 
 
    background-color: #C8E6C9; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.container { 
 
    margin: 0 10% 0 10%; 
 
} 
 

 
header, ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #4CAF50; 
 
} 
 

 
h1 { 
 
    margin: 0; 
 
    border-bottom: 1px solid #FFFFFF; 
 
    font-family: 'Roboto', sans-serif; 
 
    font-weight: 400; 
 
} 
 

 
li { 
 
    float: left; 
 
    margin: 0 0 0 0; 
 
} 
 

 
h1, li a { 
 
    display: block; 
 
    color: #FFFFFF; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
    border: 2px solid #4CAF50; 
 
    border-top: 6px solid #4CAF50 
 
} 
 

 

 
/*link actions*/ 
 

 
li a.active { 
 
    background-color: #795548; 
 
    border: 2px solid #795548; 
 
    border-top: 6px solid #388E3C; 
 
} 
 

 
li a:hover { 
 
    background-color: #FDD835; 
 
    border: 2px solid #795548; 
 
    border-top: 6px solid #388E3C; 
 
    color: #795548; 
 
} 
 

 
li a.active:hover { 
 
    background-color: #FDD835; 
 
    border: 2px solid #795548; 
 
    border-top: 6px solid #388E3C; 
 
} 
 

 
a:first-child { 
 
    text-decoration: none; 
 
    color: #FFFFFF; 
 
} 
 

 
a:first-child:hover { 
 
    color: #795548; 
 
}

<body> 
 
    <noscript>Please Use JavaScript you loser.</noscript> 
 
    <div class="container"> 
 
    <header> 
 
     <nav> 
 
     <h1><a href="index.html">My Website</a></h1> 
 
     <ul> 
 
      <li><a href="index.html" class="active">Home</a></li> 
 
      <li><a href="page2.html">About</a></li> 
 
      <li><a href="page3.html">Getting Started</a></li> 
 
     </ul> 
 
     </nav> 
 
    </header> 
 
    </div> 
 
</body>

出典

2016-07-13 Paul V

これは境界線が遭遇する方法です。私は、ボックスシャドウの代わりに、上部の境界線を使用してお勧めしたい

注：

あなたはulにoverflow:hiddenでフロートをクリアしました。これはこのテクニックが機能しなくなるでしょう。私は代替のclearfixメソッドを提案したいと思います。

* { 
 
    box-sizing: border-box; 
 
} 
 
body { 
 
    font-family: 'Roboto', sans-serif; 
 
    font-weight: 300; 
 
    background-color: #C8E6C9; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.container { 
 
    margin: 0 10% 0 10%; 
 
} 
 
header, 
 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    float: left; 
 
    width: 100%; 
 
    background-color: #4CAF50; 
 
} 
 
h1 { 
 
    margin: 0; 
 
    border-bottom: 1px solid #FFFFFF; 
 
    font-family: 'Roboto', sans-serif; 
 
    font-weight: 400; 
 
} 
 
li { 
 
    float: left; 
 
    margin: 0 0 0 0; 
 
} 
 
h1, 
 
li a { 
 
    display: block; 
 
    color: #FFFFFF; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
    border: 2px solid #4CAF50; 
 
    border-top: none; 
 
    box-shadow: 0 -6px 0px 0px #4CAF50; 
 
} 
 
/*link actions*/ 
 

 
li a.active { 
 
    background-color: #795548; 
 
    border: 2px solid #795548; 
 
    border-top: none; 
 
    box-shadow: 0 -6px 0 0px #388E3C; 
 
} 
 
li a:hover { 
 
    background-color: #FDD835; 
 
    border: 2px solid #795548; 
 
    border-top: none; 
 
    box-shadow: 0 -6px 0 0px #388E3C; 
 
    color: #795548; 
 
} 
 
li a.active:hover { 
 
    background-color: #FDD835; 
 
    border: 2px solid #795548; 
 
    border-top: none; 
 
    box-shadow: 0 -6px 0px 0px #388E3C; 
 
} 
 
a:first-child { 
 
    text-decoration: none; 
 
    color: #FFFFFF; 
 
} 
 
a:first-child:hover { 
 
    color: #795548; 
 
}

<div class="container"> 
 
    <header> 
 
    <nav> 
 
     <h1><a href="index.html">My Website</a></h1> 
 
     <ul> 
 
     <li><a href="index.html" class="active">Home</a> 
 
     </li> 
 
     <li><a href="page2.html">About</a> 
 
     </li> 
 
     <li><a href="page3.html">Getting Started</a> 
 
     </li> 
 
     </ul> 
 
    </nav> 
 
    </header> 
 
</div>

出典

2016-07-13 18:32:39

ああ美しい！私はこれを解決策としてマークしました。私はちょうど始めて箱の影を使ったことがないので、ありがとう。 –

@Paulie_Dがコメントしたよう、あなたのアンカータグの上部の境界線にある茶色のは、あなたの一番上の緑と茶色の境界線を囲むとの交点です。

body { 
 
    font-family: 'Roboto', sans-serif; 
 
    font-weight: 300; 
 
    background-color: #C8E6C9; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.container { 
 
    margin: 0 10% 0 10%; 
 
} 
 

 
header, ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #4CAF50; 
 
} 
 

 
h1 { 
 
    margin: 0; 
 
    border-bottom: 1px solid #FFFFFF; 
 
    font-family: 'Roboto', sans-serif; 
 
    font-weight: 400; 
 
} 
 

 
li { 
 
    float: left; 
 
    margin: 0 0 0 0; 
 
} 
 

 
h1, li a { 
 
    display: block; 
 
    color: #FFFFFF; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
    border-top: 6px solid #4CAF50 
 
} 
 

 
h1 { 
 
    border: 2px solid #4CAF50; 
 
} 
 

 

 
/*link actions*/ 
 

 
li a.active { 
 
    background-color: #795548; 
 
    border-top: 6px solid #388E3C; 
 
} 
 

 
li a:hover { 
 
    background-color: #FDD835; 
 
    border: 2px solid #795548; 
 
    border-top: 6px solid #388E3C; 
 
    color: #795548; 
 
} 
 

 
li a.active:hover { 
 
    background-color: #FDD835; 
 
    border: 2px solid #795548; 
 
    border-top: 6px solid #388E3C; 
 
} 
 

 
a:first-child { 
 
    text-decoration: none; 
 
    color: #FFFFFF; 
 
} 
 

 
a:first-child:hover { 
 
    color: #795548; 
 
}

<body> 
 
    <noscript>Please Use JavaScript you loser.</noscript> 
 
    <div class="container"> 
 
    <header> 
 
     <nav> 
 
     <h1><a href="index.html">My Website</a></h1> 
 
     <ul> 
 
      <li><a href="index.html" class="active">Home</a></li> 
 
      <li><a href="page2.html">About</a></li> 
 
      <li><a href="page3.html">Getting Started</a></li> 
 
     </ul> 
 
     </nav> 
 
    </header> 
 
    </div> 
 
</body>

注：私ものみ適用するために、あなたのリチウムのフォールバック緑色の枠を削除し、あなたのリチウムの背景色が既に茶色ですので、私はそうのような茶色の境界線を削除するお勧めしますh1に

出典

2016-07-13 16:38:17

アクティブリンクは、しかし、他のリンクの上に微調整するためにそれらの原因のリンクの上にホバリング、このように非常に良く見えます。また、私はホバーに茶色の境界線があるので、問題は依然として続きます。 –

上ボーダーカバーボーダーを完全に作成する

答えて

関連する問題