Question

我一直在挖掘整天，以了解如何在将li li元素悬停时为其设置样式。

e.g。

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

Answer 2

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

李子的样式父李：悬停

2 个答案: