我怎样才能实现这样的悬停效果？

Question

我目前正在尝试为我的导航实现这样的悬停效果，但却失败了：

我似乎无法找到任何与我所追求的相关的教程。有人可以帮助我或指出我正确的方向吗？

Answer 1

非常含糊的问题。看看https://developer.mozilla.org/en-US/

对于这个特定问题，您可以使用CSS。假设您有一个名为.menu-item

的菜单项的课程

你可以写

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

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

祝你好运

Answer 2

我相信这（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 3

这就是你想要的（fiddle here）。

<强> HTML ：

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

<强> CSS ：

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

#Hover:hover {
    background: blue;
}