I would like to add a hover effect when user moves the mouse over one of the menu links.
I would also like a bit of space between each line in the menu.
Is there a way to add this to .menuitems
or will I have to add a class to each of the elements inside the <ul>
scope?
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>
答案 0 :(得分:1)
使用以下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>
答案 1 :(得分:1)
从悬停css中删除类名称将为您提供黄色背景颜色并添加padding-bottom将为您提供额外的空间。 Working Example
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;
}
答案 2 :(得分:0)
只需从a:hover .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;
}
它会起作用。