在子 li 上设置父 li:hover [英] Style parent li on child 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 类 :)

What this does is that when the mouse enters one of the child <li> elements, this adds the highlighted class to the parent <li>. And when the mouse leaves, the class is removed. So you just have to create a highlighted class now :)

$(this).closest('.page_item') 只搜索与 .page_item 选择器匹配的最近父元素(因此，最近的父元素带有page_item 类).

$(this).closest('.page_item') just searches for the closest parent element which matches the .page_item selector (so, the closest parent with a page_item class).

这篇关于在子 li 上设置父 li:hover的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！