CSS半徑和懸停填充整個區域

Question

我試圖創建一個選項卡式導航。

我不能讓我的懸停顏色填充我的選項卡的整個區域（左上角/右上角）。現在懸停只覆蓋標籤內的鏈接文本，懸停沒有圓角。

我希望懸停完美覆蓋標籤的區域 - 圓角和所有。

HTML：

<div id="tabbed-widget-2" class="widget tabbed-widget"> 
    <div class="widget-wrap"> 
     <div class="tw-tabs ui-tabs ui-widget ui-widget-content ui-corner-all"> 
      <ul class="tw-tabbed-nav ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all"> 
       <li id="tab-link-2-0" class="ui-state-default ui-corner-top"> 
        <a href="#tw-content-2-0">Welcome</a> 
       </li> 
       <li id="tab-link-2-1" class="ui-state-default ui-corner-top"> 
        <a href="#tw-content-2-1">Topics</a> 
       </li> 
       <li id="tab-link-2-2" class="ui-state-default ui-corner-top"> 
        <a href="#tw-content-2-2">Archives</a> 
       </li> 
       <li id="tab-link-2-3" class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"> 
        <a href="#tw-content-2-3">Social</a> 
       </li> 
      </ul> 

CSS

#tab-link-2-0, #tab-link-2-1, #tab-link-2-2, #tab-link-2-3 { 
     background: green; 
     padding: 2px 12px; 
     margin: 0 8px 0 0; 
     -moz-border-radius: 8px 8px 0 0; 
     border-top-left-radius: 8px; 
     border-top-right-radius: 8px; 
    } 

#tab-link-2-0 a:hover, #tab-link-2-1 a:hover, #tab-link-2-2 a:hover, #tab-link-2-3 a:hover { 
     background: none repeat scroll 0 0 #ffab35; 
    } 

Answer 1

綠色背景是L1標籤和你的風格：徘徊標籤不立
和<a>是一個內聯元素添加display:block它
http://tinkerbin.com/aqHTscEE

Answer 2

Y您需要將#tab-link-2-0 a:hover更改爲#tab-link-2-0:hover等。以下是jsFiddle。此外，這裏是一些代碼：

#tab-link-2-0:hover, #tab-link-2-1:hover, #tab-link-2-2:hover, #tab-link-2-3:hover { 
    background: none repeat scroll 0 0 #ffab35; 
}​ 

，我不知道爲什麼圓角沒有顯示你的，我使用的是Chrome和我能看到圓潤的邊框。

Answer 3

我已經修改你的代碼，它工作正常:: -

<div id="tabbed-widget-2" class="widget tabbed-widget"> 
    <div class="widget-wrap"> 
    <div class="tw-tabs ui-tabs ui-widget ui-widget-content ui-corner-all"> 
    <ul class="tw-tabbed-nav ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all"> 
    <li id="tab-link-2-0" class="ui-state-default ui-corner-top"> 
    <a href="#tw-content-2-0">Welcome</a> 
    </li> 
    <li id="tab-link-2-1" class="ui-state-default ui-corner-top"> 
    <a href="#tw-content-2-1">Topics</a> 
    </li> 
    <li id="tab-link-2-2" class="ui-state-default ui-corner-top"> 
    <a href="#tw-content-2-2">Archives</a> 
    </li> 
    <li id="tab-link-2-3" class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"> 
    <a href="#tw-content-2-3">Social</a> 
    </li> 
    </ul> 

CSS： -

#tab-link-2-0 a , #tab-link-2-1 a, #tab-link-2-2 a, #tab-link-2-3 a { 
     background: green; 
     padding: 2px 12px; 
     margin: 0 8px 0 0; 
     -moz-border-radius: 8px 8px 0 0; 
     border-top-left-radius: 8px; 
     border-top-right-radius: 8px; 
     display:block; 
    } 

#tab-link-2-0 a:hover, #tab-link-2-1 a:hover, #tab-link-2-2 a:hover, #tab-link-2-3 a:hover { 
     background: none repeat scroll 0 0 #ffab35; 
    } 

小提琴鏈接： -

http://jsfiddle.net/Cqf2R/3/