Question

我尝试更改背景颜色div并同时链接，链接位于div内，其结构如下：

当我将div指针放到div上时，仅更改链接的背景，而不再更改，front_mn_item的背景保持相同的颜色

我不知道这在语法上是不好的，因为我不能更改这2件事，请覆盖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;
}

从那时起，下一个只会影响锚标记的样式：

.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>

Answer 2

如果更改作为{ "TX": [ "retail", "insurance" ], "NY": [ "auto", "food" ], "CA": [ "retail", "health", "auto" ] }标签（链接）父级的div的背景，则背景颜色将应用于整个div及其包含的所有内容，如果子元素没有背景声明的颜色与父元素不同。

意思是如果您希望它的背景颜色与a相同，则无需向background-color添加a值。

您应该这样写：

.front_mn_item

如果.front_mn_item:hover { text-decoration:none; color:#111 !important; background-color:#fff !important; }有其自己的背景色，则需要将鼠标悬停在a上，然后执行以下操作：

.front_mn_item

编辑：更新第一个评论：

如果您需要在.front_mn_item:hover a { text-decoration:none; color:#111 !important; background-color:#fff !important; }上更改background-color中的div，并且在div悬停时更改hover和background-color：

color

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

2 个答案: