悬停改变了我所有的 li 标签

Question

我有这个代码，只是一个简单的列表来制作菜单

ul li {
  position: relative;
  top: 55px;
  height: 30px;
  background: #212;
  display: inline-block;
  width: 29%;
  margin: 1%;
  margin-bottom: 0;
  padding: 5px;
  -webkit-border-top-right-radius: 30px;
  -moz-border-top-right-radius: 30px;
  -ms-border-top-right-radius: 30px;
  -o-border-top-right-radius: 30px;
  border-top-right-radius: 30px;
  -webkit-border-top-left-radius: 30px;
  -moz-border-top-left-radius: 30px;
  -ms-border-top-left-radius: 30px;
  -o-border-top-left-radius: 30px;
  border-top-left-radius: 30px;
}
ul li:hover {
  box-shadow: 1px 1px 10px white;
  position: relative;
  top: 20px;
  height: 60px;
  padding-top: 1.5em;
  font-size: 20px;
}

<ul>
  <a href="#">
    <li>MENU</li>
  </a>
  <a href="#">
    <li>CARDS</li>
  </a>
  <a href="#">
    <li>CONTACT</li>
  </a>
</ul>

这会在我的菜单按钮上创建我想要的效果，但由于某种原因，padding-top 和 font-size 部分适用于所有 li，而不仅仅是我 hover 上的那个。

如果我删除这两个，box-shadow 和相对定位只会影响悬停的对象。

我怎样才能让它只影响我悬停的按钮？

我知道我可以给每个按钮一个 ID 并使用ID:hover，但是没有更短的代码解决方案吗？

Answer 1

您的 HTML 无效，您只能将 li 作为 ul 的直接子代

更改它并从:hover 规则中删除除font-size 和box-shadow 之外的所有内容（正是您仅删除的那些），并将padding 中的li 应用到a

ul li {
  list-style: none;
  position: relative;
  top: 55px;
  height: 30px;
  background: #212;
  float: left;
  width: 29%;
  margin: 1% 1% 0;
  border-radius: 30px 30px 0 0
}
ul li a {
  padding: 5px;
  display: block;
  color: white;
  text-align: center
}
ul li:hover a {
  box-shadow: 1px 1px 10px red;
  font-size: 20px;
}

<ul>
  <li>
    <a href="#">MENU</a>
  </li>
  <li>
    <a href="#">CARDS</a>
  </li>
  <li>
    <a href="#">CONTACT</a>
  </li>
</ul>