悬停时覆盖父级边框

我在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

悬停时覆盖父级边框

回答

相关问题