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

【问题标题】：How can I achieve a hover effect like so?我怎样才能实现这样的悬停效果？
【发布时间】：2014-06-14 06:17:01
【问题描述】：

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

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

【问题讨论】：

你到底想要什么效果？

标签： css hover

【解决方案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;
}

【讨论】：

【解决方案2】：

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

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

的菜单项类

你可以写

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

cccccc 是你想要的任何颜色。

祝你好运

【讨论】：

【解决方案3】：

这就是你想要的 (fiddle here)。

HTML：

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

CSS：

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

#Hover:hover {
    background: blue;
}

【讨论】：