懸停/選定的菜單顯示背景

我需要一些懸浮效果的背景ul li。懸停/選定的菜單顯示背景

圖片：

HTML

<div id="topnav"> 
     <ul class="nav clearfix"> 
      <li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2 current_page_item menu-item-25"> 
      <a href="http://localhost/">Home</a> 
      </li> 
      <li id="menu-item-45" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-45"> 
       <a href="http://localhost/">Menu2</a> 
      </li> 
      <li id="menu-item-98" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-98"> 
       <a href="http://localhost/">Menu3</a> 
      </li> 
      <li id="menu-item-96" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-96"> 
       <a href="http://localhost/">Menu4</a> 
      </li> 
      <li id="menu-item-97" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-97"> 
       <a href="http://localhost/">Menu5</a> 
      </li> 
     </ul> 
    <div>

CSS

#topnav { 
     font-size: 8pt; 
     font-weight: bold; 
     margin-top: 2%; 
     border: 1px solid #DDDDDD; 
     float: left; 
     font-size: 8pt; 
     margin-bottom: 0; 
     margin-left: 0; 
     margin-right: 0; 
     margin-top: 7% !important; 
     opacity: 0.8; 
     padding: 0; 
     width: 60%; 
    } 
    #topnav ul { 

     line-height: 1; 
     list-style: none outside none; 
     margin: 0; 
     padding: 0; 
     display: block; 
    } 
    #topnav ul li { 
     float: left; 
     width: auto; 
     margin:10px; 
    } 
    #topnav ul { 
     line-height: 1; 
     list-style: none outside none; 
    }

來源

2013-04-16 HopeFull

JSfiddle不像圖中所示的例子。 –

先生，我只想顯示白色背景..沒有顏色/字體問題.. – HopeFull

我已經更新了一些更多的懸停css – HopeFull

類似這樣的：jsfiddle.net/kaGvs/5？ :)

您可以給「a」標籤一個負邊距和邊框，它們應該相互抵消。

#topnav ul li a { 
    border-top: 15px solid transparent; 
    border-bottom : 15px solid transparent; 
    margin: -25px 0; 
    display:block; 
    line-height: 30px; 
} 

#topnav ul a:hover, #topnav ul ul a:hover { 
    color: #0A0A0A; 
    background-color: #CBBBA1; 
    border-color: white; 
}

來源

2013-04-16 08:12:19

據我所知用CSS3，你不能選擇的元素的父（我可能是錯誤）。使用JQuery相當容易$("#topnav a:hover").parent()這將選擇包含a：hover的li。

希望我明白這個問題，這可以幫助你。

着色白李jQuery的例子，你將不得不調整李所以這種影響是明顯的：

$(function(){ 
$("#topnav a").mouseenter(function(){ 
     $("#topnav a:hover").parent().css("background-color","#FFFFFF"); 
    }).mouseleave(function(){ 
     $("#topnav a:hover").parent().css("background-color","#CBBBA1"); 
    }); 
});

DEMO

來源

2013-04-16 06:32:12

試試這個

#topnav ul li:hover{ 
    background:white; 
} 
#topnav ul li:hover a{ 
    background:#d8b038; 
}

DEMO

注意：根據您的用戶界面改變位置。我剛剛給出了懸停效果。

來源

2013-04-16 06:38:00 Sowmya

thnakx爲你答.. 但我需要這樣的東西：jsfiddle.net/kaGvs/5，它被解決/ – HopeFull

懸停/選定的菜單顯示背景

回答

相關問題