Изменить цвет фона при наведении курсора и цветовой ссылки

Question

Я пытаюсь изменить цвет фона 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

Если вы измените фон div, который является родителем тега a (ссылка), тогда цвет фона будет применен ко всему div и всему, что он включает, если дочерним элементам не объявлен цвет фона. это отличается от родительского элемента.

То есть вам не нужно добавлять 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 на hover и background-color и color при наведении div:

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