Question

我有一个导航栏，其中每个链接都是不同颜色的矩形。我想产生一种悬停效果，当您将鼠标悬停在矩形上时，它会向上移动，而当您在页面上时，它会一直保持。我似乎无法确切地知道如何在CSS中做到这一点。

这是我目前所拥有的： Nav Bar

/* Header
    ===============*/

header {
  background: #2EBBDC;
  color: white;
  min-height: 4.375em;
}

header a {
  color: white;
  text-decoration: none;
  font-size: 1.75rem;
  font-weight: 600;
}

header li {
  float: left;
  display: inline;
}

header #branding {
  float: left;
}

header #branding .logo {
  width: 550px;
}

header nav {
  float: right;
  margin-top: 60px;
}

.about {
  background: #29A448;
  padding: 5px 15px 100px;
}

.resources {
  background: #3171A2;
  padding: 5px 15px 100px;
}

.meet {
  background: #FF9950;
  padding: 5px 15px 100px;
}

.book {
  background: #7F55CF;
  padding: 5px 15px 100px;
}

.shop {
  background: #DD302C;
  padding: 5px 15px 100px;
}

.news {
  background: #F99799;
  padding: 5px 15px 100px;
}

<nav>
  <ul>
    <li><a href="about.html" class="about">About</a></li>
    <li><a href="resources.html" class="resources">Resources</a></li>
    <li><a href="meet.html" class="meet">Meet Us At...</a></li>
    <li><a href="book.html" class="book">Book Us</a></li>
    <li><a href="shop.html" class="shop">Shop</a></li>
    <li><a href="news.html" class="news">In the News</a></li>
  </ul>
</nav>

Answer 1

使用overflow: hidden和transform: translateY()。

示例

body {
  margin: 0;
}

.menu {
  background: #555656;
}

.menu>ul {
  overflow: hidden;
  display: flex;
  justify-content: flex-end;
  list-style: none;
}

.menu a {
  text-decoration: none;
  min-height: 50px;
  display: block;
  padding: 5px 10px;
  transform: translateY(20px);
}

.menu a:hover {
  transform: translateY(0px);
}

.menu>ul>li:nth-child(odd) a {
  background: #efefef;
}

.menu>ul>li:nth-child(even) a {
  background: #FAFAFB;
}

<nav class="menu">
  <ul>
    <li><a href="about.html" class="about">About</a></li>
    <li><a href="resources.html" class="resources">Resources</a></li>
    <li><a href="meet.html" class="meet">Meet Us At...</a></li>
    <li><a href="book.html" class="book">Book Us</a></li>
    <li><a href="shop.html" class="shop">Shop</a></li>
    <li><a href="news.html" class="news">In the News</a></li>
  </ul>
</nav>

Answer 2

如果我正确阅读了该问题，那么您实际上是想让它向上移动然后甚至在用户将鼠标从元素移开后仍然向上停留，对吗？

我不认为使用悬停和CSS可以做到这一点。因为您实际上想永久更改元素的位置（或至少直到刷新），所以不能使用悬停。最好的方法是在JavaScript中使用onmouseenter事件。

所以您的CSS看起来像这样-

 header li { 
 text-decoration: none;
 min-height: 50px;
 display: block;
 padding: 5px 10px;
 margin-top: 20px;
 }

您的html元素将如下所示

<li onmouseenter="moveUp(this)"><a href="resources.html" class="resources">Resources</a></li>

然后在html的底部，紧接您要使用的结束body标签之前。

<script>
function moveUp(x) {
    x.style.marginTop = "0px";
 }
</script>

这会将给定元素作为x参数传递到moveUp(x)函数中，并将其顶边距减小为0。这就是this关键字的作用。您也可以通过其他方式执行此操作。您可以使用绝对定位并为top属性使用负值，等等。但是，通过使用onmouseenter，您只会在鼠标进入元素时影响该属性，而在鼠标退出时不受影响。可以肯定的是，如果我正确阅读了您的问题，那就是您想要做的。希望这会有所帮助。

悬停效果使导航栏的背景矩形过渡

2 个答案:

示例