风格父李对孩子李：悬停 [英] Style parent li on child li:hover

问题描述

eg

$ b $我一直在挖掘一整天，以了解如何设计父li的样式。 b

 < ul> 
< li>父元素< / li> 
< ul> 
< li>子元素< / li> 
< / ul> 
< ul> 
  

我发现无数帖子询问如何在CSS中做到这一点是不可能的。人们说你可以用Javascript做到这一点，但从来没有说过！

我是一个Javascript新手，所以一些帮助将不胜感激。

谢谢。

编辑：这里是输出的源代码。我不确定它是否会影响Javascript / jQuery所需的选择器，因为您可以看到它会在类名称中添加额外的信息，例如类名称顶部的page-item-9（page_item ）。这是由Wordpress添加的，但我只需要使用page_item在CSS中引用它。

 < ul类= pagenav > 
 
< li class =page_item page-item-12 current_page_item>< a href =＃title =Home>主页< / a>< / li> 
< li< / page>< 
< li class =page_item page-item-4>< a href =＃title =Corporate> Corporate< / a>< / li> 
< li< li class =page_item page-item-5>< a href =＃title =Fashion，Hair& Beauty> Fashion，Hair&美容与LT; / A>< /锂> 
 
< 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>婚礼< / 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>其他< / a>< / li> 
< li class =page_item page-item-9>< a href =＃title =联系人>联系人< / a>< / li> 
 
< / ul> 
  

编辑2：

以下是我在header.php文件中使用的建议。

 < style type =text / CSS> 
 .highlighted {背景：＃000; } 
< / style> 
 
 
< script type =text / javascript> 
 $（function（）{
 $（'.page_item .page_item'）。mouseenter（function（）{
 $（this）.closest（'。page_item'）。addClass（' '）; 
}）。mouseleave（function（）{
 $（this）.closest（'。page_item'）。removeClass（'highlight'）; 
}）; 
}）; 
< / script> 
  

如果没有任何问题，它必须是Wordpress的问题。代码工作正常，没有烦人的WordPress的层次结构。

解决方案

javascript：

 <！ - 仅当您尚未使用jQuery时才添加以下行： - > 
< script src =https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.jstype =text / javascript>< / script> 
< script type =text / javascript> 
 $（'。page_item .page_item'）。mouseenter（function（）{
 $（this）.parent（）。closest（'。page_item'）。addClass（'highlight'）; 
 $（this）.parent（）。closest（'。page_item'）。removeClass（'highlight'）; 
}）; 
< / script> 
  

当鼠标进入子元素< li> 元素，这会将突出显示的类添加到父元素< li> 中。当鼠标离开时，该类将被删除。所以你现在只需要创建一个突出显示的类：）
$ b $ p $（this） .closest（'。page_item'）只是搜索与 .page_item 选择符匹配的最接近的父元素（所以， code> page_item class）。

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

e.g.

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

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!

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

Thanks.

EDIT: 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>

EDIT 2:

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>

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

解决方案

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>

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') just searches for the closest parent element which matches the .page_item selector (so, the closest parent with a page_item class).

这篇关于风格父李对孩子李：悬停的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！