css - 更改背景颜色鼠标悬停和颜色链接

Question

我尝试同时更改背景色 div 和链接，链接在 div 内部，结构是这样的:

当我把我的指针放在 div 上时，只改变链接的背景但没有改变，front_mn_item 的背景保持相同的颜色

我不知道这在语法上有什么问题，因为我不能改变这两件事，把 div 放在上面，同时改变颜色背景和颜色链接。

.front_mn_item
{
position:relative;
width:97%;
height:30px;
line-height:30px;
margin-top:3px;
margin-left:auto;
margin-right:auto;
margin-bottom:3px;
padding-left:1%;
background-color:#111;
font-family:Arial;
font-size:14px;
color:#fff;
}



.front_mn_item:hover a
{
text-decoration:none;
color:#111 !important;
background-color:#fff !important;
}

<div class="front_mn_item"><a href="u">Home</a></div>
<div class="front_mn_item"><a href="u">Home</a></div>
<div class="front_mn_item"><a href="u">Home</a></div>
<div class="front_mn_item"><a href="u">Home</a></div>
<div class="front_mn_item"><a href="u">Home</a></div>
<div class="front_mn_item"><a href="u">Home</a></div>
<div class="front_mn_item"><a href="u">Home</a></div>

Answer 1

您还需要包含下一个 CSS 样式:

.front_mn_item:hover
{
    background-color:#fff !important;
}

因为，下一个只会影响 anchor 标签样式:

.front_mn_item:hover a
{
    text-decoration:none;
    color:#111 !important;
    background-color:#fff !important;
}

您可以检查下一个工作示例:

.front_mn_item
{
    position:relative;
    width:97%;
    height:30px;
    line-height:30px;
    margin-top:3px;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:3px;
    padding-left:1%;
    background-color:#111;
    font-family:Arial;
    font-size:14px;
    color:#fff;
}

.front_mn_item:hover
{
    background-color:#fff !important;
}

.front_mn_item:hover > a
{
    text-decoration:none;
    color:#111 !important;
}

<div class="front_mn_item"><a href="u">Home</a></div>
<div class="front_mn_item"><a href="u">Home</a></div>
<div class="front_mn_item"><a href="u">Home</a></div>
<div class="front_mn_item"><a href="u">Home</a></div>
<div class="front_mn_item"><a href="u">Home</a></div>
<div class="front_mn_item"><a href="u">Home</a></div>
<div class="front_mn_item"><a href="u">Home</a></div>