Question

我正在为我的网站创建一个主菜单，该菜单上的链接会被悬停的链接排斥，从而产生效果。当菜单为水平时，我可以正常使用。但是，当菜单为垂直时，如何获得排斥的链接？

我尝试过： -添加margin-top和margin-bottom，但只有下面的链接被排斥，而悬停的链接本身也被向下推动。 -将否定的margin-top添加到悬停的链接上，只会向上推。 -在悬停上方的链接中添加否定margin-top。

#MainMenu {
  position: absolute;
  margin: 0;
  top: 0;
  max-width: 100%;
  left: 50%;
  transform: translate(-50%);
  height: 240px;
}

.MainMenu-Wrapper {
  position: relative;
  width: auto;
  margin-top: 70px;
}

#MainMenu li {
  list-style-type: none;
  display: block;
}

#MainMenu a {
  text-decoration: none;
  font-size: 1em;
  margin: 0 2em;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  padding: 10px;
}

<ul id="MainMenu">
  <div class="MainMenu-Wrapper">
    <li>
      <a href="#">Link1</a>
    </li>
    <li>
      <a href="#">Link2</a>
    </li>
    <li>
      <a href="#">Link3</a>
    </li>
    <li>
      <a href="#">Link4</a>
    </li>
  </div>
</ul>

Answer 1

我设法使其正常运行，但还远远不够完美。但是至少选择器正在做他们应该做的事情！

#MainMenu {
  padding: 0;
}

#MainMenu li {
  list-style-type: none;
  position: relative;
  transition: all 0.4s;
}
#MainMenu li:nth-child(2n) {
  background: #ddd
}

#MainMenu a {
  display: block;
  text-decoration: none;
  font-size: 1em;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  padding: 10px;
}

#MainMenu:hover li {
  top: -20px;
}
#MainMenu li:hover {
  top: 0;
}
#MainMenu li:hover~li {
  top: 20px;
}

<ul id="MainMenu">
    <li><a href="#">Link1</a></li>
    <li><a href="#">Link2</a></li>
    <li><a href="#">Link3</a></li>
    <li><a href="#">Link4</a></li>
    <li><a href="#">Link5</a></li>
    <li><a href="#">Link6</a></li>
</ul>

Answer 2

我仍然不确定我是否正确理解了您想要完成的工作。但是您想要的是this之类的东西吗？

#MainMenu {
  padding: 0;
}

#MainMenu li {
  list-style-type: none;
  position: relative;
  transition: all 0.4s;
}
#MainMenu li:nth-child(2n) {
  background: #ddd
}

#MainMenu a {
  display: block;
  text-decoration: none;
  font-size: 1em;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  padding: 10px;
}

#MainMenu:hover li {
  padding-top: 0;
}
#MainMenu li:hover {
  padding: 20px 0;
}

<ul id="MainMenu">
    <li><a href="#">Link1</a></li>
    <li><a href="#">Link2</a></li>
    <li><a href="#">Link3</a></li>
    <li><a href="#">Link4</a></li>
    <li><a href="#">Link5</a></li>
    <li><a href="#">Link6</a></li>
</ul>

如何创建排斥其他链接的悬停效果？

2 个答案: