懸停時覆蓋父級邊框

我在div.menu內有ul菜單。父母.menu有頂部和底部1px solid border。當將鼠標懸停在li元素上時，會添加另一個邊框，但父邊框仍然會出現在其上方。懸停時覆蓋父級邊框

我想在上懸停時不顯示.menu頂部邊框我不想使用js，除非它是唯一的解決方案。

這是我的代碼和我的臨時修復。

HTML：

<div class="menu"> 
    <ul> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">Fun</a></li> 
    <li><a href="#">Work</a></li> 
    </ul> 
</div>

CSS：

.menu{ 
    width: 100%; 
    background-color: black; 
    /* I want this border to... ↓ */ 
    border-top: 1px solid black; 
    border-bottom: 1px solid black; 
    box-sizing: border-box; 
    } 

    .menu ul{ 
    list-style: none; 
    overflow: hidden; 
    margin: 0px; 
    height:35px; 
    } 

    .menu ul li{ 
    display: block; 
    float:left; 
    border-left: 1px solid gray; 
    position: relative; 
    } 

    .menu ul a{ 
    color: #FFF; 
    padding: 10px; 
    display: block; 
    } 

    .menu ul a:hover{ 
    text-decoration: none; 
    background-color: white; 
    color: pink; 
    /* ...not be displayed above this border when hovering */ 
    border-top: 3px solid pink; 
    }

我只找到這個低效的解決方案：

.menu ul:hover{ 
    position: relative; 
    top: -1px; 
}

Codepen鏈接：http://codepen.io/eldev/pen/YPYLQz?editors=110

有什麼想法？

修改：

backgound顏色是不一樣的邊框顏色我錯誤地做到了。更新了Codepen鏈接。

來源

2015-02-11 elhoucine

當前，您不能根據子選擇器來定位父項。你將不得不使用js這個，我建議你用它標記問題 – Huangism 2015-02-11 16:29:02

我只想問你爲什麼設置一個邊框，如果它是背景相同的顏色？ – DaniP 2015-02-11 16:29:15

與Daniel相同的問題... – 2015-02-11 16:29:57

有幾個解決方案在同一時間。

是什麼？（或我不理解正確）http://codepen.io/anon/pen/XJVYMW

我已經添加margin-top: -1px爲ul

來源

2015-02-11 16:51:54 Attenzione

我不認爲這可能很簡單。謝謝。 – elhoucine 2015-02-11 17:09:56

@elhoucine你應該使用'position：relative; top：-1px;'因爲性能和兼容性問題而不是'margin'。「保證金」強制重新計算所有兄弟姐妹和孩子。 – bluejamesbond 2015-02-11 17:14:33

你的表現是什麼意思？這個邊距只用於第一頁的渲染，而不是'：hover'，看起來非常簡單。無論如何，相同的結果可以通過'position：relative'with'top：-1px' for'ul'來實現，不帶'：hover' – Attenzione 2015-02-12 20:42:01

必須有一些修改不要CSS;爲了更容易理解，我已將所有更改添加到HTML部分。我沒有修改CSS部分。

在這裏你去http://codepen.io/anon/pen/rapKxE
而且美化版本http://codepen.io/anon/pen/MYrXQN

< Refer to CodePen >

注意檢查代碼上codepen的最新更新。

來源

2015-02-11 16:34:38 bluejamesbond

這不是我正在尋找，但無論如何感謝;） – elhoucine 2015-02-11 17:09:34

@elhoucine哈哈哈我誤解了你的問題。無論如何看看美化的版本 - 也許你可能會喜歡它！ – bluejamesbond 2015-02-11 17:11:13

其實我喜歡它（y）。 – elhoucine 2015-02-11 17:15:32

有四種方案：

margin-top: -1px;;
Javascript;
position: relative; top: -1px;;
transform: translateY(-1px)。

來源

2015-02-11 17:01:45 tleb

或'position：relative;頂部：-1px'或'transform：translateY（-1px）':) – Attenzione 2015-02-12 20:49:58

@Atentenion加入：p – tleb 2015-02-12 21:09:14

懸停時覆蓋父級邊框

回答

相關問題