CSS 翻转 - 悬停问题？

Question

我在翻车方面遇到了一些麻烦..希望你能帮助我!

我正在使用 li 导航，我希望有单独的框链接到不同的页面。这部分很好，可以正常工作。我希望能够将鼠标悬停在框上并让框和链接改变颜色。我可以毫无问题地改变盒子，当你将鼠标悬停在它上面时链接也会改变，但是当你将鼠标悬停在盒子上时，有没有办法让它们同时改变？到目前为止，这是我得到的:

#nav-menu ul{float: right; text-align: center;}

#nav-menu li{margin-right: 5px; list-style:none; padding-left: 1px; text-align: center; font-size: 14px;float:left; padding:0px 15px; width: 57px; position:relative;z-index:200; background: #000; color: #FFFFFF; font-family: georgia;}

#nav-menu li a{display: block; float: left; color:#fdf2e7;font-size:14px;text-decoration:none; text-align: center; padding:5px 0px 5px 0px; font-family: georgia;}

#nav-menu a:hover{display: block; color:#000000; text-align: center; background: #f3d5e1; text-decoration:none !important; font-family: georgia;}

#nav-menu:hover{display: block; color:#000000; text-align: center; background: #f3d5e1; text-decoration:none !important; font-family: georgia;}

--

如有任何帮助，我们将不胜感激。谢谢! :)

Answer 1

当您将鼠标悬停在列表项上时，使用 li:hover 定位列表项，并使用 li:hover a 定位其父列表项悬停在其上的 anchor .