我怎样才能达到像这样的悬停效果？

Question

我目前正在努力实现这样的悬停效果对于我的导航，但惨遭失败：

我似乎无法找到任何相对于什么，我以后的教程。有人能帮我解决问题吗，或者指点我正确的方向？

Answer 1

我相信这（JSBin）是你想要的。

如果我理解正确的问题，那就是棘手的一点是，当悬停，橙色背景超出了家长的高度。

我赶紧把这个例子在一起，我有你可以用一个:before元素实现这一目标完全的感觉。

HTML： 气候 联系我们

CSS：

html { 
    font-family: helvetica; 
} 

a { 
    text-decoration: none; 
} 

nav { 
    background-color: rgb(29, 106, 173); 
    display: flex; 
    flex-direction: row-reverse; 
    font-size: .9em; 
} 

nav a { 
    color: white; 
    text-transform: uppercase; 
    padding: 80px 10px 20px; 
    position: relative; 
} 

nav a:hover { 
    color: rgb(29, 106, 173); 
    background-color: rgb(240, 139, 0); 
} 

nav a:hover:before { 
    content: ''; 
    position: absolute; 
    background-color: rgb(240, 139, 0); 
    left: 0; 
    bottom: -10px; 
    width: 100%; 
    height: 10px; 
} 

nav a:first-of-type { 
    order: 1; 
} 

Answer 2

问题非常模糊。退房https://developer.mozilla.org/en-US/

对于这个特定的问题，你可以使用CSS。比方说你有一个名为.menu-item

您的菜单项的类，你可以写

.menu-item:hover{ 
    background:#ccccccc; 
} 

其中cccccc是任何你想要的颜色。

好运

Answer 3

这是你想要的（fiddle here）。

HTML：

<div id="Hover">Hover me!</a> 

CSS：

#Hover { 
    width: 90px; 
    height: 40px; 
    background: yellow; 
} 

#Hover:hover { 
    background: blue; 
}