<a>標記內部</a>樣式<ul><li>

Question

當用戶將鼠標移到菜單鏈接之一上時，我想添加一個懸停效果。

我還想在菜單中的每一行之間留一點間隔。

是否可以將其添加到.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>

Answer 1

使用以下CSS選擇器來引用<a>

.menuitems li a:hover

要在行后添加空間，可以使用邊距。

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

參見參考： CSS選擇器

 .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> 

Answer 2

從懸浮css刪除類名將為您提供黃色背景色，並添加padding-bottom將為您提供額外的空間。 工作實例

CSS：

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

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

Answer 3

只需從a：hover .menuitems刪除.menuitems .menuitems 。

的CSS

.menuitems {
font-size: 20px;
font-family: 'Roboto';
color: #337AB7;
position: relative;
display: block;
width: 180px;
}
/*For hover */
    a:hover{
        background-color: yellow;       
    }
/* To make space between two lines */
    li {
    margin-bottom: 5px;
    }

它會工作。