我有这个菜单:
<div class="nav">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">AMORTECIMENTO</a></li>
</ul>
</div>
正常外观:
这是用户悬停菜单时的外观:
所以,我不知道如何设置 css,假设我在菜单上有大牌,例如:“AMORTECIMENTO”
有什么建议吗??
我已经试过了,但是在小名字上,菜单正在剪切背景...
.nav ul li a{
display:block;
font-size:15px;
color:#000;
padding:5px 7px;
background:transparent;
text-decoration:none;
}
.nav ul li:hover{
background:url(../imagens/bola_fundo_menu.png) center no-repeat;
}
我的意图是,当用户悬停菜单项时,在 <li>
上背景,出现篮球,并在<a>
标记,背景将变为#FFF,但我在菜单上有大小名字,所以我无法设置 <li>
的宽度和 <a>
标签……我想
最佳答案
这是一个使用伪元素的简单示例:http://codepen.io/anon/pen/iwerJ
使用您最初发布的完全相同的 HTML,使用如下 CSS:
.nav {
background: #CCC;
font-family: Helvetica, Arial, sans-serif;
line-height: 48px;
margin: 50px auto 0;
width: 90%;
}
.nav ul:after {
clear: both;
content: '';
display: block;
}
.nav ul li {
float: left;
font-size: 14px;
list-style: none;
padding: 0 10px;
position: relative;
}
.nav ul li:hover:after {
/* Replace background with image */
background: #abc123;
/* Optionally remove radius */
border-radius: 30px;
content: '';
display: block;
position: absolute;
top: 50%; left: 50%;
margin-top: -30px;
margin-left: -30px;
height: 60px; width: 60px;
}
.nav a {
color: #333;
display: inline-block;
line-height: 180%;
padding: 0 4px;
position: relative;
text-decoration: none;
z-index: 1;
}
.nav li:hover a { background: #FFF; }
关于html - 悬停时更改 <li> 背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12733600/