якорная ссылка, вложенная в ли

Question

Я создаю горизонтальное меню на моем сайте, и все в порядке, но одно.У меня есть ссылка в каждом <li>, а цвет установлен на белый, а li не имеет фона, но при наведении курсора я хочу установить li фон на белый и связать цвет текста с черным.Проблема в том, что ширина тегов <a> отличается от ширины <li>, и когда мышь находится над частью, которая находится в <li>, но не в <a>, оба становятся белыми. Ссылочные ссылки не могут иметь свойства ширинынасколько я знаю, и я пробую разные трюки, но безуспешно. Есть идеи?

#primary-menu ul li {
    list-style-type: none;
    float: left;
    background-image: url('menu-sep.png');
    background-repeat: no-repeat;
    background-position: right;
}

#primary-menu li a:hover {
    color: black;
}

#primary-menu li:hover {
    background-color: white;
    color: black;
}
#primary-menu li a {
    color: white;
    text-decoration: none;
    padding-right: 8px;
    margin-right: 8px;
    width: 100%;
    height: 23px;
}

`

Answer 1

Проверьте ваш <li> стиль.У них, вероятно, есть отступы.Снимите его, и якоря должны занимать все доступное пространство.Также измените поле на теге <a> на padding.Заполнение считается частью тега (т. Е. При наведении курсора на заполнитель он запускает псевдоселектор :hover), а поля - нет.

Answer 2

Как вы уже написали выше, это должно работать, но вы говорите, что это не работает, затем попробуйте, сделав класс ссылающимся только на такой текст, как.

.liText
{
color:white;
}

.liText:hover
{
color:black;
}

надеюсь, что это сработает.

используйте class атрибут с вашим тегом.например,

<a class="liText"> // for single class

, если вы хотите использовать два или более классов для одного тега, затем используйте другой класс после пробела, как я упоминал ниже.

<a class="firstClass SecClass ThirdClass">