Блог

Главная - Вопросы по программированию - эффект наведения курсора мыши на навигацию. li, но исключающий остальные элементы li

эффект наведения курсора мыши на навигацию. li, но исключающий остальные элементы li

#html #css #hover #html-lists

#HTML #css #наведите #html-списки

Вопрос:

 .nav li:hover a{
background-color: darkgrey;
}

.navbar li {
list-style-type: none;

float: right;
padding-left: 5px;
padding-right: 5px;
margin-top: 17px;
font-family: myriad-pro, sans-serif;
font-weight: lighter;  
     <body>
        <nav class="navbar">

            <ul>
                <li><a class="list" href="./test.html"> Home</a></li>
                <li><a class="list" href="#"> Service</a></li>
                <li><a class="list" href="#"> Contact</a></li>
                <li><a class="list" href="./test.html"> Training</a></li>
            </ul>

Привет, парень.

На панели навигации я придал элементам li эффект наведения курсора. теперь проблема в том, что он автоматически применяется ко всем элементам li на странице. я хочу эффект только в моем nav. bar, но как бы я ни пытался, это либо для всех на странице, либо ни для одного. код, как он есть во фрагменте, также не работает. единственный способ, которым я могу заставить список перемещаться, — это: li: hover a{background-color: darkgrey;} но тогда, очевидно, это применяет все элементы li на странице. есть ли способ обойти это? Спасибо!!

Ответ №1:

 a.list:hover {
  background-color: darkgrey;
}

.navbar li {
list-style-type: none;

float: right;
padding-left: 5px;
padding-right: 5px;
margin-top: 17px;
font-family: myriad-pro, sans-serif;
font-weight: lighter;  
 <body>
        <nav class="navbar">

            <ul>
                <li><a class="list" href="./test.html"> Home</a></li>
                <li><a class="list" href="#"> Service</a></li>
                <li><a class="list" href="#"> Contact</a></li>
                <li><a class="list" href="./test.html"> Training</a></li>
            </ul>

неправильная логика для CSS. Для создания эффекта наведения необходимо:

 a.(class/id):hover {
  style
}

Однако я также не уверен, что этот список действительно хорошая идея для этого. Это приведет к созданию плохих и неэффективных привычек. После посещения вашей навигационной ссылки цвет изменится, поэтому можно подумать:

 a.link:link {
    text-decoration: underline;
    color: #141414; 
}

a.link:visited {
    text-decoration: underline;
    color: #141414; 
}

a.link:active {
    text-decoration: underline;
    color: #141414; 
}

Это предотвратит нежелательное изменение цвета текста кнопки ссылки.