菜单列表 - 文本区域的背景颜色在悬停时不会改变

Posted 2023-05-08

【中文标题】菜单列表 - 文本区域的背景颜色在悬停时不会改变

【英文标题】：Menu list - background-color of the text area doesn't change on hover

【发布时间】：2014-10-31 18:51:21

【问题描述】：

我的列表菜单有问题。

悬停时background-color 会发生变化，但只是在the 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/

【参考方案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; 

【讨论】：

对不起，就一件事，如果我想让背景颜色在被选中时变灰，我该如何管理？

@user3439889 好的.. 你希望背景颜色为灰色是什么意思，当它被选中？？？

【参考方案2】：

移除标签的背景颜色属性。我的意思是从你的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;