1

要素に境界線がない<ul>を作成しました。<li>a<li>をホバーすると 3px の黒い境界線が表示され、 a<li>をクリックすると<span>選択した の子になります<li>。

残念ながら、これ<span>にカーソルを合わせると、さらに 3px の境界線が追加されるため、合計で 6px の境界線が表示されます。

どうすればこれを回避できますか?

li:hoverの子への影響を無効にする方法はありliますか?

私のコード:

.tablinks li {
    color: #8c8c8e;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.tablinks span {
    display: block;
    border-top-color: #000;
    border-top-style: solid;
    border-width:3px;
    color:#000;
}

.tablinks > li:hover {
    color: #000;
    border-top-color: #000;
    border-top-style: solid;
    border-width:3px;
}

すでにボーダー幅 span:hoverを 0px に設定しようとしました。残念ながら、境界線は 0px にジャンプしてから 3px にジャンプします。

.tablinks span:hover {
    border-width:0px;
}
4

3 に答える 3

1

spanタグを挿入するコードに追加できる場合は、li選択した要素にクラスを追加できます。

これにより、次のように、セレクターを使用して:not選択した要素を除外できます。

.tablinks > li:not(.selected):hover{
   color: #000;
   border-top-color: #000;
   border-top-style: solid;
   border-width:3px;
}

次のデフォルトの HTML があるとします。

<ul class="tablinks">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
</ul>

1 つの項目を選択すると、次のようになります。

<ul class="tablinks">
    <li>item 1</li>
    <li class="selected"><span>item 2</span></li>
    <li>item 2</li>
    <li>item 3</li>
</ul>

上記の CSS の変更を使用すると、選択した が除外されliます。

デモ- 選択したものを除くli

クラスである必要はなく、次のようなデータ属性でもかまいません。

<ul class="tablinks">
    <li>item 1</li>
    <li data-selected><span>item 2</span></li>
    <li>item 2</li>
    <li>item 3</li>
</ul>

次に、CSS を次のように変更します。

.tablinks > li:not([data-selected]):hover{
    color: #000;
    border-top-color: #000;
    border-top-style: solid;
    border-width:3px;
}
于 2013-10-16T14:59:05.847 に答える
0

試す

.tablinks li span { border-width: 0px; }

「li span」のボーダー幅に影響する .tablinks span { border-width } クラスを削除します。

.tablinks スパンを使用すると、li 要素のスパンの子に影響を与えるため、li にカーソルを合わせると、3px かかり (「.tablinks > li:hover」と言います)、「.tablinks span」は li 要素の下に 3px を設定します.

「.tablinks span」を次のように変更することもできます

.tablinks > span

スパンがすでに .tablinks の直接である場合

于 2013-10-16T14:45:05.813 に答える
0

Try adding that instead of the last block you posted : 

.tablinks li:hover span {
    border-width: 0px;
}
于 2013-10-16T14:45:48.063 に答える