使用 jquery 获取前一个 p 标签来更改背景

Question

我有以下问题。我有一个 css 下拉导航，如果导航的下拉部分有鼠标悬停，我希望“导航标题”的背景保持其悬停时获得的背景颜色。问题是，如果用户继续移动并将鼠标悬停在下拉列表上，“导航标题”的悬停状态将恢复为“正常”。这就是为什么我认为我可以使用 jquery 来改变它。

但不幸的是我不知道如何选择特定的元素。

以下是导航示例：

<ul> 
                    <li> 
                        <p class="naviHead first">Finanzen</p> 
                            <ul> 
                                <li><a href="http://www.spardaxx.de/kredit" title="SparDaxx Ratenkredit">Ratenkredit</a></li>
                                <li><a href="http://www.spardaxx.de/baufinanzierung" title="SparDaxx Baufinanzierung">Baufinanzierung</a></li>
                                <li><a href="http://www.spardaxx.de/altersvorsorge" title="SparDaxx Riester Rente">Riester Rente</a></li>
                            </ul> 
                    </li> 
                </ul> 

因此，如果用户将鼠标悬停在 p 标签上，则会打开下拉菜单 ul。现在，如果有人将鼠标悬停在以下 ul 上，我想更改 p 的背景颜色..

这是我的 jquery 到目前为止，

$().ready(function() {
            $('#TopNav ul ul').mouseover(function() {
                 $(this).parents('p.naviHead').filter(':first').css("background", "black");


            })
        });

我想解决方案很简单，但我不知道.. 因此，感谢任何帮助。谢谢！ :)

Answer 1

$(this).prev().css("backgroundColor", "black");  

或者如果你有更复杂的布局那么 -

$(this).parent().find('p.naviHead').css("backgroundColor", "black");

可能会更好

Answer 2

$(this).siblings('p.naviHead').css("background", "black");

$('#TopNav ul ul').mouseleave(function() {
  $(this).parent().find('p.naviHead').css("backgroundColor", "yourPreviosColor");
})