html - 在<ul> <li>中设置<a>标记的样式

当用户将鼠标移到菜单链接之一上时，我想添加一个悬停效果。

我还想在菜单中的每一行之间留一点空间。

有没有一种方法可以将其添加到.menuitems或将必须向<ul>范围内的每个元素添加一个类？

CSS：

.menuitems {
    font-size: 20px;
    font-family: 'Roboto';
    color: #337AB7;
    position: relative;
    display: block;
    width: 180px;
}

a:hover .menuitems {
    background-color: yellow;
}

HTML：

<md-menu-content>
    <ul class="menuitems">
        <li md-ink-ripple>
            <a ui-sref="book">New Booking</a>
        </li>
        <li md-ink-ripple>
            <a ui-sref="admin.home">Admin</a>
        </li>
        <li md-ink-ripple>
            <a ui-sref="admin_logout">Logout</a>
        </li>
    </ul>
</md-menu-content>

最佳答案

使用以下CSS选择器来引用<a>

.menuitems li a:hover

要在行后添加空间，可以使用边距。

.menuitems li {
margin-bottom: 5px;
}

请参阅以供参考：CSS Selectors

.menuitems {
  font-size: 20px;
  font-family: 'Roboto';
  color: #337AB7;
  position: relative;
  display: block;
  width: 180px;
}

.menuitems li a:hover {
  background-color: yellow;
}

.menuitems li {
  margin-bottom: 5px;
}

<ul class="menuitems">
  <li md-ink-ripple>
    <a ui-sref="book">New Booking</a>
  </li>
  <li md-ink-ripple>
    <a ui-sref="admin.home">Admin</a>
  </li>
  <li md-ink-ripple>
    <a ui-sref="admin_logout">Logout</a>
  </li>
</ul>

关于html - 在<ul> <li>中设置<a>标记的样式，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44858178/