Если вы проверили, что к элементу применен правильный класс, я уверен, что вы просто недостаточно указали свои стили. Укажите, насколько это возможно, включая родителей 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 &amp; Beauty">Fashion, Hair &#038; 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.

 Hogsmill25 янв. 2011 г., 12:05
Вы используете или думаете об использовании / возможности использовать jQuery?
 Salman A25 янв. 2011 г., 12:07
Если вы JavaScript new-b, переключитесь на jQuery - это позволит вам писать меньше и делать больше. Кроме того, это решит ваши проблемы в 3 строки или меньше.
 Caspar Kleijne25 янв. 2011 г., 12:07
Ваш HTML-фрагмент неверен;) Вам следует поместить второй UL внутри LI

Ответы на вопрос(2)

Решение Вопроса

JavaScript

<!-- add the following line only if you are not already using jQuery: -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $('.page_item .page_item').mouseenter(function() {
        $(this).parent().closest('.page_item').addClass('highlighted');
    }).mouseleave(function() {
        $(this).parent().closest('.page_item').removeClass('highlighted');
    });
</script>

Что это делает, что когда мышь входит в один из детей<li> элементы, это добавляетhighlighted класс для родителя<li>, И когда мышь уходит, класс удаляется. Так что вам просто нужно создатьhighlighted класс сейчас :)

$(this).closest('.page_item') просто ищет ближайший родительский элемент, который соответствует.page_item селектор (так, ближайший родитель сpage_item класс).

 danjah25 янв. 2011 г., 12:08
(и, наконец, как)
 fnkymnky25 янв. 2011 г., 14:55
Я попытался использовать $ ('li.page_item li.page_item'), и это не сработало. Смотрите исходный код выше.
 Arnaud Le Blanc25 янв. 2011 г., 14:04
Вы можете просто изменить.child а также.parent селекторы; например$('li.page_item li.page_item') выберу всеli элементы с классомpage_item которые также находятся вli элемент с классомpage_item, А такжеclosest('li.page_item') найдет первого родителяli элемент с классомpage_item.
 fnkymnky25 янв. 2011 г., 13:09
Это здорово! Тем не менее, я использую его в сочетании с моей навигацией по Wordpress, поэтому добавление классов «родитель» и «ребенок» в навигацию невозможно без целой загрузки других проблем кодирования для меня с помощью PHP. Есть ли способ сделать это без имен классов? Все элементы li имеют класс "page_item".
 Arnaud Le Blanc25 янв. 2011 г., 13:53
дети или родители или оба имеют класс page_item?

что к элементу применен правильный класс, я уверен, что вы просто недостаточно указали свои стили. Укажите, насколько это возможно, включая родителей ul и li стиля, который вы хотите установить. Это просто потому, что Wordpress использует такую ​​длинную (и раздражающую imo) иерархию для этих стилей.

Ваш ответ на вопрос