在子 li 上设置父 li:hover答案

【问题标题】：Style parent li on child li:hover在子 li 上设置父 li:hover
【发布时间】：2011-01-25 11:03:24
【问题描述】：

我整天都在研究如何在将鼠标悬停在子 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 层次结构，代码可以正常工作。

【问题讨论】：

您正在使用，或正在考虑使用/能够使用 jQuery？
您的 HTML-sn-p 无效 ;) 您应该将第二个 UL 放在 LI 中
如果您是 JavaScript 新手，请切换到 jQuery——它可以让您少写多做。此外，它会在 3 行或更少的时间内解决您的问题。

标签： javascript html hover html-lists

【解决方案1】：

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 类）。

【讨论】：

这太棒了！但是，我将它与我的 Wordpress 导航结合使用，因此在没有使用 PHP 的其他编码问题的情况下，将类“父”和“子”添加到导航是不可能的。有没有办法在不命名类的情况下做到这一点？所有 li 元素都有“page_item”类。
孩子或父母或两者都有课程 page_item ？
你可以改变.child和.parent选择器；例如$('li.page_item li.page_item') 将选择类page_item 的所有li 元素，这些元素也在类page_item 的li 元素中。而closest('li.page_item') 将找到第一个父元素li 类page_item。
我尝试使用 $('li.page_item li.page_item') 但没有用。见上面的源代码。
不！那也不行。坐着盯着它看，因为我肯定错过了什么。

【解决方案2】：

如果您检查了元素是否应用了正确的类，我很确定您只是没有足够地指定您的样式。尽可能早地指定，包括要设置的样式的 ul 和 li 父级。这只是因为 Wordpress 对这些样式使用了如此长（且令人讨厌的 imo）层次结构。

【讨论】：