李子的样式父李:悬停

Question

我一整天都在挖掘,以便在悬停在子li元素上时找出如何设置父li的样式.

例如

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

我找到了无数的帖子,询问如何在CSS中找到它是不可能的.人们说"你可以用Javascript做到",但从未说过如何做!

我有点像Javascript newb所以一些帮助将非常感激.

谢谢.

编辑:这是输出的源代码.我不确定它是否会影响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层次结构.

Answer 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类与一个类).