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

这是工作小提琴：https://jsfiddle.net/Nisarg0/by3d0kt9/7/

您需要做的就是为要回复button的每个div添加一个类hover。像这样：

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

然后，在hover上添加一个改变div样式的CSS：

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

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

Answer 2

您可以使用解决方案https://jsfiddle.net/by3d0kt9/11/

＆＃13;

$(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);
  });
  
  $(".button_desktop_01 > div > div").not('.button_desktop_02').click(function(e){
    e.stopPropagation();
  	$(this).addClass('visited_once');
  });
  
  $(".button_desktop_02 > div > div div").click(function(){
  	$(this).addClass('visited_once');
  });
});

＆＃13;

 .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;
}

.visited_once{
  background: #fff;
  color: #000;
}

＆＃13;

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

＆＃13;

更新了代码

<强> JS

$(".button_desktop_01 > div > div").not('.button_desktop_02').click(function(e){
   e.stopPropagation();
   $(this).addClass('visited_once');
});

$(".button_desktop_02 > div > div div").click(function(){
   $(this).addClass('visited_once');
});

<强> CSS

.visited_once{
  background: #fff;
  color: #000;
}

Color将在click事件中更改。

在jQuery slideUp / Down菜单中悬停效果

2 个答案: