加載一個css樣式，當在一個不同的風格上

我有一個index.php，與一個菜單，我想看到類menuitem：懸停激活時，我與類（鏈接）的項目，但我還希望看到class menuitem：當我懸停鏈接菜單的其他內容時，懸停活動。好吧，我會解釋一下這個實例：加載一個css樣式，當在一個不同的風格上

我有一個下拉菜單。當您結束頂部鏈接時，它會從頂部鏈接的底部生成一個邊框，但是當您位於此頂部鏈接的下拉菜單中時，邊框會消失，因爲您沒有在鏈接上懸停下拉菜單。我希望在下拉菜單和鏈接時看到邊框。

這是代碼。但注意你可以看到更好的行動（我知道有點難以理解的問題）。

的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更好。

來源

2014-01-16 user3203690

你能提供一個鏈接或的jsfiddle或類似的東西？ – Dennis

嘗試添加以下規則：

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

，甚至本作都遵守同樣的規則：

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

來源

2014-01-16 21:49:31

爲了在下拉菜單和鏈接結束時看到邊框。爲這兩個元素添加相同的類「.both-element」。

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

來源

2014-01-16 21:48:18 Moussawi7

加載一個css樣式，當在一個不同的風格上

回答

相關問題