CSS Bootstrap停止在活动项目上悬停边框

问题描述：

如何停止正在应用两次边框...一次用于活动项目和一次悬停？我试过使用.navbar a:not(.active):hover但它不起作用。我也试着给所有的导航栏项目提供一个底部边框，它具有所需的厚度，但是背景颜色和改变悬停的颜色。CSS Bootstrap停止在活动项目上悬停边框

的期望的效果是，活动项为黑体且白色bottom-border，而鼠标在还具有白色bottom-border（红色所示的图像中），但并不以粗体（既作为项目颜色将是白色的我不会为打赢哪一个而烦恼）。但我的问题是，当鼠标移动到活动项目上时，bottom-border被添加两次。

寻求代码帮助的问题必须包含在问题本身**中重现**所需的最短代码。请参阅[**如何创建最小，完整和可验证示例**]（http://*.com/help/mcve）。 CSS的图像不是代码.... –

一个元素不能有两个边框，所以这里显然有两个元素....可能是一个'li'和一个锚'a' ...决定哪一个获得边框并调整相应的CSS。 –

@Paulie_D：我知道一个元素不能有两个边框，我有一个'li'包含一个'Html.ActionLink'会稍后算作一个锚点'a'吗？ –

答

这很可能是由于边境被应用到2个不同的元素。

我让你了解了这个问题fiddle。

正如你所看到的，所有工作正常，因为.active类和：hover伪类都被称为ul> li。

ul > li.active{ 
    border-bottom:3px solid red; 
} 

ul > li:hover{ 
    border-bottom: 3px solid yellow; 
}

如果您尝试将例如：hover更改为ul> li> a，您会看到双边框。

ul > li.active{ 
    border-bottom:3px solid red; 
} 

ul > li > a:hover{ 
    border-bottom: 3px solid yellow; /* double border */ 
}

谢谢你，我认为这将是沿着这条线。我制作了自己的[jsfiddle]（https://jsfiddle.net/6Lp9xpou/）（可能不起作用，这是我的第一次尝试）。但正如你所看到的悬停背景颜色是浅灰色，我希望它与背景相同（所以它看起来不是什么），但无法让它工作。 –

在这里，你是工作[小提琴]（https://jsfiddle.net/6Lp9xpou/2/）没有灰色背景。它是由'.nav> li> a：hover'中的背景规则引起的，需要被覆盖。您可以在小提琴中的CSS部分的最后几行看到它的评论。如果解决了您的问题，请将我以前的答案表达为正确。谢谢 – fbid

我需要更多地玩这个，它在jsfiddle中可以正常工作，但是在我的项目中我仍然得到双边界:( –

CSS Bootstrap停止在活动项目上悬停边框

相关推荐