Особый фон для одиночной навигационной ссылки - PullRequest
Новая
       10

Особый фон для одиночной навигационной ссылки

0 голосов
/ 22 мая 2019

Хотите узнать, как изменить одну навигационную ссылку, чтобы цвет фона наведения был другим, чем у других.

Я пробовал #nav # contact.hover и #nav #contact: наведите курсор на нетбезрезультатно. 

<div id="nav">
    <ul>
        <li id="home"><a href="#">Home</a></li>
        <li id="service"><a href="#">Service</a></li>
        <li id="parts"><a href="#">Parts</a></li>
        <li id="contact"><a href="#">Contact</a></li>
    </ul>
    <div class="clearall"></div>
</div>
</html>

CSS:

.clearall {
    clear:both;
}
#nav {
    background:#333;
}
#nav ul li {
    float:left;
    margin-right:0px;
}
#nav ul li a {
    color:#fff;
    text-transform:uppercase;
    padding:10px 20px;
    display:block;
    text-decoration:none;
}


#nav ul li a:hover {
    background-color:black;
}



Should change the contact element in the nav to have a background hover color of white

Ответы [ 2 ]

0 голосов
/ 22 мая 2019

Вы можете сделать это, используя псевдо-класс :last-child в своем CSS.

Вот кодекс с исправлением, но ниже я опишу, что я сделал: https://codepen.io/Athys/pen/WBdYdZ

Я добавил :last-child в селектор li, так как ссылка «контакт» отображается как последний элемент списка (последний li). Затем я добавил псевдо-класс :hover к селектору и присвоил ему другой цвет при наведении и текстовый цвет, чем у других элементов a. Надеюсь это поможет.

0 голосов
/ 22 мая 2019

Просто нужно правильно выбрать селектор. Я думаю, что у вас были проблемы, потому что ваш базовый стиль для hover слишком специфичен, что превосходит большинство переопределений. 

#nav ul li:hover a

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

.clearall {
    clear:both;
}
#nav {
    background:#333;
}
#nav ul li {
    float:left;
    margin-right:0px;
}
#nav ul li a {
    color:#fff;
    text-transform:uppercase;
    padding:10px 20px;
    display:block;
    text-decoration:none;
}
#nav ul li:hover a {
    background-color:black;
}
#nav ul li#contact:hover a {
  background: url('https://picsum.photos/100');
}
<div id="nav">
    <ul>
        <li id="home"><a href="#">Home</a></li>
        <li id="service"><a href="#">Service</a></li>
        <li id="parts"><a href="#">Parts</a></li>
        <li id="contact"><a href="#">Contact</a></li>
    </ul>
    <div class="clearall"></div>
</div>
...