我的列表菜单有问题。
悬停时 background-color
会发生变化,但仅在 box
区域,text-area
背景不会发生变化。
我想找到一种方法来实现这一点:
这是我的代码:
<div class="services">
<ul>
<li class="general"><a href="" title="" >General</a></li>
<li><a href="" title="" >Marketing and Brand Strategy</a></li>
<li><a href="" title="" >Events and Launches at Exhibitions</a></li>
<li><a href="" title="" >PR / Press releases,</a></li>
<li><a href="" title="" >Distribution and sales</a></li>
<li><a href="" title="" >Media and social media</a></li?
</ul>
</div>
CSS:
.services ul { display: block; padding: 0; margin: 0; }
.services ul li{ list-style-type: none; background: #ffffff; line-height: 47px; border-top: 1px solid white; font-size: 12pt; width:350px }
.services ul li:hover{ list-style-type: none; background: #efefef; line-height: 47px; border-top: 1px solid white; font-size: 12pt; }
.services ul ul:hover >a{ list-style-type: none; background: #efefef; line-height: 47px; border-top: 1px solid white; font-size: 12pt; }
.services ul li a{ width:100%; color: black; padding: 0 12px; font-family: 'Lora', serif; font-size: 12pt; text-decoration: none;background-color:#ffffff }
.services ul li a:hover{ width:100%; color: black; padding: 0 12px; font-family: 'Lora', serif; font-size: 12pt; text-decoration: none;background-color:#efefef; }
jsfiddle 链接:http://jsfiddle.net/r8rns8gw/1/
最佳答案
删除 background-color:#ffffff;
到 .services ul li a
- DEMO
CSS:
.services ul { display: block; padding: 0; margin: 0; }
.services ul li{ list-style-type: none; background: #ffffff; line-height: 47px; border-top: 1px solid white; font-size: 12pt; width:350px }
.services ul li:hover{ list-style-type: none; background: #efefef; line-height: 47px; border-top: 1px solid white; font-size: 12pt; }
.services ul ul:hover >a{ list-style-type: none; background: #efefef; line-height: 47px; border-top: 1px solid white; font-size: 12pt; }
.services ul li a{ width:100%; color: black; padding: 0 12px; font-family: 'Lora', serif; font-size: 12pt; text-decoration: none; }
.services ul li a:hover{ width:100%; color: black; padding: 0 12px; font-family: 'Lora', serif; font-size: 12pt; text-decoration: none;background-color:#efefef; }
关于css - 菜单列表 - 悬停时文本区域的背景颜色不会改变,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25709230/