在使用不同样式时加载 css 样式答案

【问题标题】：Load a css style when over on a different style在使用不同样式时加载 css 样式
【发布时间】：2014-02-06 01:17:06
【问题描述】：

我有一个 index.php，带有一个菜单，当我在类（链接）的项目上方时，我希望看到类 menuitem:hover 处于活动状态，但我也希望看到类 menuitem:hover 处于活动状态当我将鼠标悬停在链接菜单的其他 li 时。好的，我会用真实的例子来解释：

我有一个下拉菜单。当您在顶部链接上时，它会从顶部链接的底部生成一个边框，但是当您在此顶部链接的下拉菜单上时，边框会消失，因为您将下拉菜单悬停在链接上。当您在下拉菜单中以及通过链接时，我希望看到边框。

这里是代码。但是请注意，您可以看到更好的实际效果（我知道这个问题有点难以理解）。

index.php:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
    <head>
        <link type="text/css" rel="stylesheet" href="./lib/css/layout.css" media="all">
    </head>

    <body>

    <div id="headerbar">
        Hello World
    </div>

    <div id="mainmenu-bar">
        <div id="mainmenu-content">
            <img src="./lib/images/logo.png" height="75" width="75" style="float:left;margin-top:5px;">
            <h1 style="color:white; float:left; margin-bottom:0px; display:inline-block;">Title</h1>

            <div id="mainmenu">
                <ul>
                    <li>
                        <a href="#">Inicio</a>
                    </li>
                    <li>
                        <a class="menuitem" href="#">Acerca de</a>
                            <ul>
                                <li><a href="#">Producto</a></li>
                                <li><a href="#">Nosotros</a></li>
                            </ul>
                    </li>
                    <li>
                        <a class="menuitem" href="#">Servicios</a>
                        <ul>
                            <li><a href="#">Servicio uno</a></li>
                            <li><a href="#">Servicio dos</a></li>
                            <li><a href="#">Servicio tres</a></li>
                            <li><a href="#">Servicio cuatro</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div id="content">
        <h1 color="white">Hello World</h1>
    </div>

    </body>
</html>

layout.css

@font-face{font-family: Maven Pro; src: url(../fonts/MavenPro-Regular.ttf);}

body{font-family:Maven Pro; background:#ECECEC; border:0; font-size:100%; vertical-align:baseline; margin:0; padding:0;}

#headerbar{height:30px; float:right; margin-right:20px; margin-top:5px;}

/*MAIN MENU BAR*/
#mainmenu-bar{background:#4C84BC; width:100%; height:90px; overflow: hidden;}
#mainmenu-content{margin: 0 auto; width:1000px;}
#mainmenu{margin-top:35px; display:inline-block;}
#mainmenu ul li{float: left; margin-right: 20px; list-style: none;}
#mainmenu ul li a {color:#FFF; text-decoration: none;}
#mainmenu ul li a:hover {color: #474747;}
#mainmenu ul ul {display: none; padding: 0px; position: absolute; width: auto; margin-left: 0px;}
#mainmenu ul li:hover>ul {background: #fff; width:220px; border-right:1px solid #a4a4a4; margin-top:21px; z-index:9; position: absolute; box-shadow: 0 2px 1px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 2px 1px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.3); -o-box-shadow: 0 2px 1px rgba(0, 0, 0, 0.3); border-top:3px solid #FCD100; display: block;}
#mainmenu ul ul li {float: none;position: relative; text-decoration: none; display: block;}
#mainmenu ul ul li a{text-decoration: none;}
.menuitem {padding:11px 15px 17px;}
.menuitem:hover{border-bottom:6px solid #FCD100;}

我知道这样做可能只用 JQuery 是可能的，但如果用 CSS3 更好。

【问题讨论】：

你能提供一个链接或jsfiddle或类似的东西吗？

标签： javascript html css

【解决方案1】：

尝试添加以下规则：

.menuitem li:hover{border-bottom:6px solid #FCD100;}

甚至这样让两者都遵守相同的规则：

.menuitem:hover,
.menuitem li:hover
{
    border-bottom:6px solid #FCD100;
}

【讨论】：

【解决方案2】：

以便在您位于下拉列表和链接上方时看到边框。为两个元素添加相同的类“.both-element”。

.both-element:hover{border-bottom:6px solid #FCD100;}

【讨论】：