如何在css中的另一個邊框上獲取邊框？

我正在嘗試創建一個導航欄，其中默認情況下它具有某種顏色的border-top，當它處於懸停狀態或活動狀態時，我想要另一種顏色，但我似乎無法獲取它工作。有什麼方法可以讓這個工作起作用嗎？我試過absolute和z-index，但都不適合我。如何在css中的另一個邊框上獲取邊框？

.navbar { 
 
    background-color: #ecf0f1; 
 
} 
 
.navbar > .main-nav > ul,li { 
 
    list-style-type: none; 
 
    text-decoration: none; 
 
} 
 
.navbar > .main-nav > ul { 
 
    min-height: 60px; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #ecf0f1; 
 
    border-top: 5px solid #d1d064; 
 
    box-sizing:border-box; 
 
} 
 
.navbar > .main-nav > ul > li { 
 
    text-align: center; 
 
    min-width: 150px; 
 
} 
 
.navbar > .main-nav > ul > li > a { 
 
    display: block; 
 
    color: #737373; 
 
    text-align: center; 
 
    padding: 20px 16px; 
 
    text-decoration: none; 
 
    font-family: 'Lato', sans-serif; 
 
    font-weight: 800; 
 
} 
 
.navbar > .main-nav > ul > li.active { 
 
    border-top: thick solid #0F9E5E; 
 
} 
 
.navbar > .main-nav { 
 
    max-width: 1480px; 
 
    margin: 0 auto; 
 
}

<head> 
 
    <meta charset="UTF-8"> 
 
    <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> 
 
    <link href="https://cdnjs.cloudflare.com/ajax/libs/hover.css/2.1.0/css/hover-min.css" rel="stylesheet"> 
 
</head> 
 
<nav class="navbar"> 
 
     <div class="main-nav"> 
 
      <ul> 
 
       <li class="active hvr-sweep-to-top"><a href="#">Home</a></li> 
 
       <li class="hvr-overline-from-center"><a href="#">Second</a></li> 
 
       <li class="hvr-overline-from-center"><a href="#">Third</a></li> 
 
      </ul> 
 
     </div> 
 
    </nav>

編輯：不小心連接錯誤代碼，現在我已經固定它。

來源

2016-12-17 Daniel Chu

你是說你想要兩個邊框？或者只是一種顏色不同？兩個邊界不能正常完成，但可以使用':: before'或':: after'僞元素或者使用box-shadow來添加額外的'邊框'。如果你只想要一種不同的顏色，那目前是行不通的，因爲具有'.active'的選擇器具有[更高的特異性]（https://css-tricks.com/specifics-on-css-specificity/）一個使用'：hover'。 – GolezTrol

對不起，在帖子中不清楚。我希望當它的活動和徘徊時，導航的邊框顏色發生變化，而其他顏色保持不變。 –

如果添加邊框的li是透明的，然後改變它的顏色基於正在主動或徘徊

注意，我清理你的代碼中，並刪除margin-top: -5px;您li因爲它藏身的第一項上邊框

.navbar { 
 
    background-color: #ecf0f1; 
 
} 
 
.navbar > .main-nav > ul, 
 
li { 
 
    list-style-type: none; 
 
    text-decoration: none; 
 
} 
 
.navbar > .main-nav > ul { 
 
    min-height: 60px; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    box-sizing: border-box; 
 
} 
 
.navbar > .main-nav > ul > li { 
 
    border-top: thick solid transparent; 
 
    text-align: center; 
 
    min-width: 150px; 
 
} 
 
.navbar > .main-nav > ul > li a { 
 
    display: block; 
 
    color: #737373; 
 
    text-align: center; 
 
    padding: 20px 16px; 
 
    text-decoration: none; 
 
    font-family: 'Lato', sans-serif; 
 
    font-weight: 800; 
 
} 
 
.navbar > .main-nav > ul > li.active { 
 
    border-top-color: #0F9E5E; 
 
} 
 
.navbar > .main-nav > ul > li:hover { 
 
    border-top-color: #fff; 
 
} 
 
.navbar > .main-nav { 
 
    max-width: 1480px; 
 
    margin: 0 auto; 
 
}

<nav class="navbar"> 
 
    <div class="main-nav"> 
 
    <ul> 
 
     <li class="active"><a href="#">Home</a> 
 
     </li> 
 
     <li><a href="#">Second</a> 
 
     </li> 
 
     <li><a href="#">Third</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</nav>

來源

2016-12-17 21:50:48 LGSon

非常感謝！下次我做類似的事時，我會記住這一點。 –

使用box-shadow
默認或inset

例嘗試：

box-shadow: 0 -10px 0 0 red;

或

box-shadow: inset 0 -10px 0 0 red;

或組合

box-shadow: 0 -10px 0 0 red, 10px 0 0 blue, inset 10px 0 0 green;

結合邊框，您應該可以獲得理想的效果。

來源

2016-12-17 21:17:45

而不是使<li>標籤.active，您可以風格<a>標籤，以承擔他們的父母的整個空間和放置（活動）的邊界。然後在:hover上，在<li>標記上加上另一個邊框 - 它會使其顯示在最上面。爲了避免規模跳躍，給你<li>一些透明邊框，大小相同，你給出:hover

a { 
    display: block; 
    width: 100%; 
    height: 100%; 
} 
a.active { 
    border-top: thick solid #0F9E5E; 
} 
li { 
    border-top: thick solid transparent; 
} 
li:hover, li:active { 
    border-top: thick solid red; // color of your choice 
}

來源

2016-12-17 21:22:37 wscourge

刪除邊距，並添加一個用於邊框樣式重要的元素li.active和李！懸停

檢查這個片段

.navbar { 
 
    background-color: #ecf0f1; 
 
} 
 
.navbar > .main-nav > ul, 
 
li { 
 
    list-style-type: none; 
 
    text-decoration: none; 
 
} 
 
.navbar > .main-nav > ul { 
 
    padding-top: 1px; 
 
    min-height: 60px; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #ecf0f1; 
 
    border-top: 7px solid #d1cf82; 
 
    box-sizing: border-box; 
 
    z-index: -1; 
 
} 
 
.navbar > .main-nav > ul > li { 
 
    text-align: center; 
 
    min-width: 150px; 
 
} 
 
.navbar > .main-nav > ul > li > a { 
 
    display: block; 
 
    color: #737373; 
 
    text-align: center; 
 
    padding: 20px 16px; 
 
    text-decoration: none; 
 
    font-family: 'Lato', sans-serif; 
 
    font-weight: 800; 
 
} 
 
.navbar > .main-nav > ul > li.active { 
 
    border-top: thick solid #0F9E5E !important; 
 
    box-sizing: border-box; 
 
    z-index: 1; 
 
} 
 
.navbar > .main-nav > ul > li:hover { 
 
    border-top: thick solid #fff !important; 
 
} 
 
.navbar > .main-nav { 
 
    max-width: 1480px; 
 
    margin: 0 auto; 
 
}

<nav class="navbar"> 
 
    <div class="main-nav"> 
 
    <ul> 
 
     <li class="active"><a href="#">Home</a> 
 
     </li> 
 
     <li><a href="#">Second</a> 
 
     </li> 
 
     <li><a href="#">Third</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</nav>

希望它可以幫助

來源

2016-12-17 21:25:32 Geeky

感謝您的幫助，但綠色可能會重疊黃色嗎？ –

你能解釋一下你的意思嗎 – Geeky


             
   
    
    .navbar { 
 
     background-color: #ecf0f1; 
 
    } 
 
    .navbar > .main-nav > ul, 
 
    li { 
 
     list-style-type: none; 
 
     text-decoration: none; 
 
    } 
 
    .navbar > .main-nav > ul { 
 
     padding-top: 1px; 
 
     min-height: 60px; 
 
     margin: 0; 
 
     padding: 0; 
 
     background-color: #ecf0f1; 
 
     border-top: 7px solid #d1cf82; 
 
     box-sizing: border-box; 
 
     z-index: -1; 
 
    } 
 
    .navbar > .main-nav > ul > li { 
 
     text-align: center; 
 
     min-width: 150px; 
 
      } 
 
    .navbar > .main-nav > ul > li > a { 
 
     display: block; 
 
     color: #737373; 
 
     text-align: center; 
 
     padding: 20px 16px; 
 
     text-decoration: none; 
 
     font-family: 'Lato', sans-serif; 
 
     font-weight: 800; 
 
    } 
 
    .navbar > .main-nav > ul > li{ 
 
    border-top:7px solid red; 
 
    position:relative; 
 
} 
 
.navbar > .main-nav > ul > li:hover:before, .navbar > .main-nav > ul > li.active:before{ 
 
    content:''; 
 
    position:absolute; 
 
    width:100%; 
 
    top: -14px; 
 
    left:0; 
 
    border-top:7px solid green; 
 
} 
 
    .navbar > .main-nav { 
 
     max-width: 1480px; 
 
     margin: 0 auto; 
 
    } 
    <nav class="navbar"> 
 
     <div class="main-nav"> 
 
     <ul> 
 
      <li class="active"><a href="#">Home</a> 
 
      </li> 
 
      <li><a href="#">Second</a> 
 
      </li> 
 
      <li><a href="#">Third</a> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
    </nav>

來源

2016-12-17 21:33:57

如何在css中的另一個邊框上獲取邊框？

回答

相關問題