[英]Styling the <a> tags inside <ul> <li>
当用户将鼠标移到菜单链接之一上时,我想添加一个悬停效果。
我还想在菜单中的每一行之间留一点间隔。
是否可以将其添加到.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选择器
.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>
从悬浮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;
}
只需从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;
}
它会工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.