CSS 翻转 - 悬停问题？

Posted 2023-03-06

【中文标题】CSS 翻转 - 悬停问题？

【英文标题】：CSS rollover - hover problems?

【发布时间】：2011-11-21 11:26:51

【问题描述】：

我在翻车时遇到了一些麻烦。希望你能帮助我！

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

#nav-menu ulfloat: right; text-align: center;

#nav-menu limargin-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 adisplay: 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:hoverdisplay: block; color:#000000; text-align: center; background: #f3d5e1; text-decoration:none !important; font-family: georgia;

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

--

任何帮助将不胜感激。谢谢！ :)

【参考方案1】：

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

【讨论】：

谢谢你，亚历克斯！你解决了困扰我几个小时的问题！

Here。请注意，当li 悬停在上方时，锚样式会发生变化，因为我将#nav-menu a:hover 更改为#nav-menu li:hover a。

不确定您需要支持哪些浏览器，但请注意 IE6 仅支持 :hover on links。