悬停子列表时更改列表选项的颜色

Question

我有一个列表，当鼠标悬停在其中一个选项上时，它会显示一个子列表。当我将鼠标悬停在第二个列表上的某个选项上时，我希望它能够更改列表项的背景颜色，我必须将鼠标悬停在第二个列表上。

 #nav ul.topnav {
    	position: absolute;
    	text-align: center;
    	top: 10px;
    	right: 425px;
    }
    
    #nav li.n {
    	display: inline;
    	float: left;
    	width: 150px;
    	padding: 10px;
    }
    
    #nav a.na {
    	display: block;
    	padding: 10px, 10px;
    	text-decoration: none;
    	color: black;		
    	font-family: "Arial Black", Gadget, sans-serif
    }
    
    #nav a.na:hover {
    	color: #2E9AFE;
    	background: #848481;
    }
    
    #nav ul.innernav {
    	position: absolute;
    	display: none;
    }
    
    #nav li.n:hover ul.innernav {
    	display: block;
    	list-style-type: none;
    	text-align: center;
    	background: #A4A4A4;
    	top: 40px;
    	width: 110px;
    }
    
    #nav li.drop {
    	position: relative;
    	left: -45px;
    	padding: 5px;
    	width: 150px;
    }
    
    #nav li.drop:hover {
    	color: #2E9AFE;
    	background: #848484;
    }
    
    #nav li.drop:hover a.na {
    	background: #000000;
    }

<ul class="topnav">
    		<li class="n">
    			<a class="na" href="index.html">Blog</a>
    			<ul class="innernav">
    				<li class="drop">
    					Dungeons and Dragons
    				</li>
    				<li class="drop">
    					Video Games
    				</li>
    				<li class="drop">
    					Movies/T.V
    				</li>
    				<li class="drop">
    					News
    				</li>
    				<li class="drop">
    					Science
    				</li>
    			</ul>
    		</li>
    		<li class="n">
    			<a class="na" href="about.html">About Me</a>
    		</li>
    		<li class="n">
    			<a class="na" href="contact.html">Contact Me</a>
    		</li>
    	</ul>

我想

 #nav li.drop:hover a.na{
        background: #000000;
    }

会让它发挥作用

Answer 1

这是不可能的，因为CSS中没有父选择器。你可以使用jQuery完成这个：

$("li.drop").hover(function(){
    $(this).closest("ul.innernav").siblings("a.na").css({"background":"red"}); 

},function(){
    $(this).closest("ul.innernav").siblings("a.na").css({"background":"transparent"}); 
});

这将只找到子菜单的a并更改颜色

EXAMPLE 1

或

由于所有内容都包含在li.n中，因此您可以随时在该元素中更改a的背景，如下所示：

#nav li.n:hover a{
   background: red;
}

EXAMPLE 2

<强>更新

如果您只想让一个li悬停，则可以使用nth-of-type

li.n:nth-of-type(1):hover a{
   background: red;
}

EXAMPLE 3

Answer 2

据我所知，这只能使用Javascript库JQuery。

以下是您可以使用的一些JQuery和带有代码的JSFiddle。

$(document).ready(function() {
    $(".n li.drop").on("mouseover", function() {
        $("a.na").css("background", "#000000");    
    });
    $(".n li.drop").on("mouseout", function() {
        $("a.na").css("background", "#FFFFFF");    
    });
});

此外，您没有#nav元素，因此我将其替换为.n：

Answer 3

如果我正确理解了这个问题，您希望子菜单的父<a>中的<li>链接在您将鼠标悬停在其中一个子项上时保持其悬停状态 - 您不要这需要JS。 您只需在CSS中执行li:hover声明即可实现它。

请看我的小提琴：http://jsfiddle.net/thePav/n01c0e2h/