Раскраска ссылок на панели навигации

#css #wordpress #colors #hyperlink #navbar

#css #wordpress #Цвет #гиперссылка #панель навигации

Вопрос:

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

 <div id="pages">
        <?php wp_nav_menu();?>
    </div>

Очень простая панель навигации wordpress. WordPress автоматически присваивает каждой странице в этом меню имя класса, например .page-item-30, также wordpress присваивает им всем class .page-item .

Чего я хочу добиться, так это того, что при наведении курсора мыши на 1 страницу фон становится красным (# ff0000), а цвет шрифта становится белым; Мой css выглядит так

 #pages li{
display: inline;
float: left;
height: 20px;
padding: 5px;
margin: 0px;
margin-top: -17px;
transition: all 0.2s ease-in-out;
}
#pages li:hover{
background-color: #ff0000;
}
/** 
.page-item-27:hover a{
color: white;
transition: all 0.2s ease-in-out;
}
.page-item-2:hover a{
color: white;
transition: all 0.2s ease-in-out;
}
.page-item-21:hover a {
color: white;
transition: all 0.2s ease-in-out;
}
**/
.page-item:hover a {
color: white;
transition: all 0.2s ease-in-out;
}

.current_page_item {
background-color: #ff0000;
}
.current_page_item a{
color: white;
}

Теперь я попытался использовать .page-item-27 или около того, чтобы определить, когда должен измениться цвет шрифта, но это очень ненадежно, поскольку оно зависит от правильного идентификатора страницы. Итак, если у меня есть новая страница с идентификатором, которого нет в моем CSS, моя навигация не работает правильно.

Есть ли способ изменить цвет шрифта?

В моем текущем css есть это

 .page-item:hover a {
color: white;
transition: all 0.2s ease-in-out;
}

что, на мой взгляд, должно работать, но это не так.

Если вы не совсем понимаете это в danielps1.de вы можете заглянуть на мою живую страницу. Просто наведите указатель мыши на мою навигацию слева

Спасибо за помощь

1. Если вы хотите создать ссылку на демонстрационную версию (что очень полезно), пожалуйста, создайте ссылку на демонстрационный сайт, такой как JS Fiddle или аналогичный, в противном случае, как только вы исправите свою проблему, ссылка, показывающая проблему, перестанет показывать проблему . Кроме того, можете ли вы показать соответствующий HTML-код, который вы хотите стилизовать, что делает проблему гораздо более понятной для нас.

2. Будет сделано в будущем, но интеграция WordPress в jsFiddle довольно сложна, и если я не смогу использовать функции WordPress, я пропущу много контента, в котором есть проблема.

3. Как и HTML, который видит браузер, иначе ваш css не работал бы без предварительной обработки.

Ответ №1:

Я думаю, что ваша проблема — всего лишь небольшая ошибка.

Ваш селектор CSS должен быть:

 .page_item a:hover{
    color: white;
    transition: all 0.2s ease-in-out;
}

Вместо:

 .page-item:hover a {
    color: white;
    transition: all 0.2s ease-in-out;
}

Надеюсь, я смогу помочь.

Ответ №2:

Попробуйте использовать

 li.page_item a:hover {
    color: white;
}

как селектор CSS!