Question

我的列表菜单出了问题。

悬停时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/

Answer 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; }

Answer 2

删除标记的background-color属性。我的意思是从你的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; }

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

2 个答案: