Если вы проверили, что к элементу применен правильный класс, я уверен, что вы просто недостаточно указали свои стили. Укажите, насколько это возможно, включая родителей ul и li стиля, который вы хотите установить. Это просто потому, что Wordpress использует такую длинную (и раздражающую imo) иерархию для этих стилей.
ал весь день, чтобы узнать, как стилизовать родительский li при наведении на дочерний элемент li.
например
<ul>
<li> Parent Element </li>
<ul>
<li> Child Element </li>
</ul>
<ul>
Я нашел бесчисленные сообщения, спрашивающие, как сделать это в CSS, чтобы найти это невозможно. Люди говорят: «Вы можете сделать это с помощью Javascript», но никогда не говорите, как!
Я в некотором роде новичок в Javascript, поэтому некоторая помощь будет высоко ценится.
Благодарю.
РЕДАКТИРОВАТЬ: Здесь выводится исходный код. Я не уверен, повлияет ли это на селекторы, необходимые для Javascript / jQuery, потому что, как вы можете видеть, он добавляет дополнительную информацию в имя класса, то есть «page-item-9» поверх имени класса там уже («page_item») «). Это добавлено в Wordpress, но мне нужно всего лишь использовать «page_item» для ссылки на него в CSS.
<ul class="pagenav">
<li class="page_item page-item-12 current_page_item"><a href="#" title="Home">Home</a></li>
<li class="page_item page-item-2"><a href="#" title="About">About</a></li>
<li class="page_item page-item-4"><a href="#" title="Corporate">Corporate</a></li>
<li class="page_item page-item-5"><a href="#" title="Fashion, Hair & Beauty">Fashion, Hair & Beauty</a></li>
<li class="page_item page-item-6"><a href="#" title="Live Music">Live Music</a>
<ul class='children'>
<li class="page_item page-item-11"><a href="#" title="Music 1">Music 1</a></li>
</ul>
</li>
<li class="page_item page-item-7"><a href="#" title="Weddings">Weddings</a>
<ul class='children'>
<li class="page_item page-item-10"><a href="#" title="Wedding 1">Wedding 1</a></li>
</ul>
</li>
<li class="page_item page-item-8"><a href="#" title="Miscellaneous">Miscellaneous</a></li>
<li class="page_item page-item-9"><a href="#" title="Contact">Contact</a></li>
</ul>
РЕДАКТИРОВАТЬ 2:
Вот то, что у меня есть внутри моего файла header.php, используя данный совет.
<style type="text/css">
.highlighted { background:#000; }
</style>
<script type="text/javascript">
$(function() {
$('.page_item .page_item').mouseenter(function() {
$(this).closest('.page_item').addClass('highlighted');
}).mouseleave(function() {
$(this).closest('.page_item').removeClass('highlighted');
});
});
</script>
Если в этом нет ничего плохого, у Wordpress могут возникнуть проблемы. Код работает без раздражающей иерархии Wordpress.