悬停更改我所有的 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，而不仅仅是我 [=15] =]结束。

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

如何让它只影响我悬停的按钮？

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

Answer 1

将你的 ul li 包裹在 div 中并给 div 一个 class。然后瞄准 div 的 ul li.

HTML

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

CSS

.menu ul li:hover {
    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;
}

或定位 a

.menu ul a li:hover {/* your css */}

Answer 2

您的 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>

Answer 3

首先你的HTML是错误的。 <li> 应该是 <ul> or <ol> 的直接子代，但您有 <a href="#"><li>MENU</li></a> 这个。其次，您可以像这样 ul > li:hover{enter your styles here} 定位悬停元素，这里 ul li {} 使用这种样式 ul li { vertical-align: top;} 因为您使用的是 inline-block 所以您需要使用 vertical-align

这里是fiddlehttps://jsfiddle.net/vwvsz291/

悬停更改我所有的 li 标签

Hover changes all my li tags

html

css

hover

html-lists