在子 li 上设置父 li:hover

问题描述

我整天都在研究如何在将鼠标悬停在子 li 元素上时设置父 li 的样式.

I've been digging all day to find out how to style the parent li when hovering on a child li element.

例如

<ul>
<li> Parent Element </li>
    <ul>
    <li> Child Element </li>
    </ul>
<ul>

我发现无数帖子询问如何在 CSS 中做到这一点，但发现这是不可能的.人们说你可以用 Javascript 做到这一点"，但从不说怎么做！

I've found countless posts asking how to do it in CSS to find it's not possible. People say "you can do it with Javascript" but never say how!

我有点 Javascript 新手，因此非常感谢您的帮助.

I'm somewhat of a Javascript newb so some help would be much appreciated.

谢谢.

这是输出的源代码.我不确定它是否会影响 Javascript/jQuery 所需的选择器，因为如您所见，它在类名中添加了附加信息，即page-item-9"已经在类名的顶部(page_item").这是由 Wordpress 添加的，但我只需要使用page_item"在 CSS 中引用它.

Here is the outputted source code. I'm not sure if it will affect the selectors required for the Javascript/jQuery because, as you can see it adds additional info into the class name i.e. "page-item-9" on top of the class name there already ("page_item"). This is added by Wordpress but I've only needed to use "page_item" to reference it in the 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 文件中使用给定建议的内容.

Here is what I have inside my header.php file using advice given.

<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 层次结构，代码可以正常工作.

If there is nothing wrong with that it must be issues with Wordpress. The code works fine without the annoying Wordpress hierarchy.

推荐答案

javascript:

The 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 类 :)