jquery - jQuery slideUp/Down 菜单中的悬停效果

Question

HTML:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="navigation_desktop">

            <div class="button_desktop_01">1.0 Main Menu
                <div class="SlideItem_01">
                    <div>1.1 Sub Menu</div>
                    <div class="button_desktop_02">1.2 Sub Menu
                        <div class="SlideItem_02">
                            <div>
                                <div>1.2.1 Sub Menu</div>
                                <div>1.2.2 Sub Menu</div>
                            </div> 
                        </div>
                    </div> 
                </div>
            </div>

            <div class="button_desktop_01">2.0 Main Menu
                <div class="SlideItem_01">
                    <div class="button_desktop_02">2.1 Sub Menu
                        <div class="SlideItem_02">
                        <div>
                                <div>2.1.1 Sub Menu</div>
                                <div>2.1.2 Sub Menu</div>
                                <div>2.1.3 Sub Menu</div>
                            </div> 
                        </div>
                    </div>  
                    <div>2.2 Sub Menu</div>
                </div>
            </div>  

        </div>

CSS:

 .button_desktop_01{
 float: left;
 width: 20%;
 cursor: pointer;
 background: #5882FA;
 }

 .button_desktop_02 {
 position: relative;
 cursor: pointer;
 }

.SlideItem_01, .SlideItem_02 {
 display: none;
}

.SlideItem_02 {
 position: absolute;
 top: 0;
 left: 100%;
 width: 100%;
     background: #5882FA;
    }

 .button_desktop_01:hover, .button_desktop_02:hover,
 .button_desktop_01:active, .button_desktop_02:active,
 .button_desktop_01:link, .button_desktop_02:link,
 .button_desktop_01:visited, .button_desktop_02:visited {
 background: #CCCCCC;
 text-shadow: none;
}

jQuery:

$(document).ready(function() {
  $(".button_desktop_01, .button_desktop_02").mouseenter(function() {
    $(this).children(".SlideItem_01, .SlideItem_02").slideDown(500);
  });
  $(".button_desktop_01, .button_desktop_02").mouseleave(function() {
    $(this).children(".SlideItem_01, .SlideItem_02").slideUp(500);
  });
});

slideUp/Down 一些菜单上面的代码。到目前为止，这一切都很好。 但是，现在我希望每个子菜单在用户将鼠标悬停时更改其颜色。我尝试了不同的方法，但我无法让它发挥作用。

例如，上面的代码更改了整个菜单的颜色，而不仅仅是光标所在的特定菜单。此外，它不涵盖 SlideItem_02 的任何内容。

我必须在 CSS 中更改什么才能使悬停效果起作用？

您还可以在这里找到代码:https://jsfiddle.net/by3d0kt9/6/

Answer 1

这是工作 fiddle :https://jsfiddle.net/Nisarg0/by3d0kt9/7/

所有你需要做的就是添加一个类，比如 button 到你想要响应 hover 的每个 div。像这样:

<div class="SlideItem_02">
    <div>
        <div class="button">2.1.1 Sub Menu</div>
        <div class="button">2.1.2 Sub Menu</div>
        <div class="button">2.1.3 Sub Menu</div>
    </div> 
</div>

然后，添加一个 CSS，在悬停时更改 div 的样式:

.button:hover{
 background: #eee;
 text-shadow: none;
 color: red;
}

当然，可能有更复杂的方法来执行此操作，它们可能适合您。但是当您继续添加更多导航时，它们很可能会弄得一团糟。在这种情况下，拥有一个处理所有按钮相关工作的 button 类对我来说似乎是最干净的方式。