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

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

如果我对问题的理解正确，您希望子菜单的父级 <li> 中的 <a> link 在您将鼠标悬停在其中一个菜单上时保持其悬停状态子项目 - 你不需要 JS。您可以简单地在 CSS 中做一个 li:hover 声明来实现它。

在这里查看我的 fiddle：http://jsfiddle.net/thePav/n01c0e2h/

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

Changing color of list option when hovering a sub list

html

css

list

hover

或