Question

我正在尝试创建一个下拉按钮，除了一个小bug之外它几乎正常工作。当用户将鼠标悬停在其上时，我有几个大按钮可以改变背景颜色，其中一个按钮，当用户将鼠标悬停在其上时，会显示其中的几个子选项。一切正常，但语言按钮在用户盘旋时不会改变其背景颜色。如果光标位于按钮内部，它确实会改变颜色，但如果它触及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>

提前致谢！

Answer 1

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

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

Answer 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错误（假设您使用的是suckerfish类型的菜单）

CSS Rollover按钮错误

2 个答案: