CSS 翻转按钮错误答案

【问题标题】：CSS Rollover button bugCSS 翻转按钮错误
【发布时间】：2010-03-24 12:31:51
【问题描述】：

我正在尝试创建一个下拉按钮，它几乎可以工作，除了一个小错误。我有几个大按钮，当用户将鼠标悬停在它们上方时会改变背景颜色，其中一个是语言按钮，当用户将鼠标悬停在其上时，它会在其内部显示几个子选项。除了当用户将鼠标悬停在语言按钮上时语言按钮不会改变其背景颜色外，一切都很好。如果光标就在按钮内，它会改变它的颜色，但如果它触及 3 个子选项则不会。我需要的是一种技术或规则，说明如果用户将鼠标悬停在按钮上或用户悬停在其子元素之一上，按钮将更改背景颜色。我如何实现这一目标？这是标记：

   <ul>
                            <li><a href="/home/" title="Go to the Home page" class="current"><span>Home</span></a></li>
                            <li><a href="/about-us/" title="Go to the About Us page" class="link"><span>About us</span></a></li>
                            <li><a href="/products/" title="Go to the Products page" class="link"><span>Products</span></a></li>
                            <li><a href="/services/" title="Go to the Services page" class="link"><span>Services</span></a></li>
                            <li><a href="/news/" title="Go to the News page" class="link"><span>News</span></a></li>
                            <li><a href="/dealers/" title="Go to the Dealers page" class="link"><span>Dealers</span></a></li>
                            <li id="Rollover"><a href="" title="select language" class="link"><span>Language</span></a>
                                <ul>
                                    <li><a href="/english/">English</a></li>
                                    <li><a href="/french/">French</a></li>
                                    <li><a href="/spanish/">Spanish</a></li>
                                </ul>
                            </li>
                            <li><a href="/contact-us/" title="Go to the contacts page" class="link"><span>Contact us</span></a></li>
                        </ul>

提前致谢！

【问题讨论】：

您现在尝试使用的 CSS 是什么但不起作用？

标签： html css css-selectors

【解决方案1】：

如果您的翻转规则在<a> 标签上，那么这将不起作用，因为子选项实际上不是锚的子选项，它们是#Rollover 的子选项。这应该有效：

#Rollover:hover{background-color:<your color here>}

【讨论】：

【解决方案2】：

当鼠标悬停时，您可以尝试使用一些 javascript 添加一个类。如果您使用的是像 jQuery 这样的脚本库，它会是这样的：

$('#rollover').hover(function(){
         $(this).addClass('hover');
       },function(){
         $(this).removeClass('hover');
       });
$('#rollover a').hover(function(){
         $(this).parent("#rollover").addClass('hover');
       },function(){
         $(this).parent("#rollover").removeClass('hover');
       });

此代码未经测试，因此可能需要一两次调整，但这也应该修复 IE 中出现的任何 CSS 错误（假设您使用的是吸盘鱼类型的菜单）

【讨论】：