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

Question

我正在为我的网站创建一个主菜单，其中链接被悬停的链接排斥，作为一种效果。当菜单是水平的时，我得到了它的工作。但是当菜单是垂直的时，我如何获得排斥的链接？

我试过： - 添加margin-topand 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>

标签： htmlcss

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>