0

タブ付きのナビゲーションを作成しようとしています。

タブの領域全体（左上/右上を丸めたもの）にホバーカラーを塗りつぶすことができません。現在、ホバーはタブ内のリンクテキストのみをカバーしており、ホバーの角は丸みを帯びていません。

ホバーがタブの領域（丸い角など）を完全にカバーするようにします。

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;
    }
4

3 に答える 3

1

緑の背景はliタグ用で、スタイルを設定しました：liではなくタグにホバーし、それに
追加<a>するインライン要素ですhttp://tinkerbin.com/aqHTscEEdisplay:block

于 2012-08-11T04:43:29.810 に答える
1

私はあなたのコードを変更しました、そしてそれはうまく働いています::-

<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/

于 2012-08-11T04:51:52.100 に答える
0

などに変更#tab-link-2-0 a:hoverする必要があります。これがjsFiddleです。また、ここにいくつかのソースコードがあります：#tab-link-2-0:hover

#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を使用しているので、丸みを帯びた境界線が表示されます。

于 2012-08-11T04:47:06.437 に答える