html - CSS 翻转按钮错误

Question

我正在尝试创建一个下拉按钮，除了一个小错误外，它几乎可以正常工作。我有几个大按钮，当用户将鼠标悬停在它们上面时，它们会改变背景颜色，其中之一，语言按钮，当用户将鼠标悬停在它上面时，会在其内部显示几个子选项。一切正常，除了当用户将鼠标悬停在语言按钮上时语言按钮不会更改其背景颜色。如果光标刚好在按钮内，它会改变颜色，但如果它触及 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> 上标签，那么这将不起作用，因为子选项实际上不是 anchor 的子项，它们是#Rollover 的子项。这应该有效:

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