3

HTMLのリストに問題があります。

基本的な機能が必要です。ユーザーがリストの要素にカーソルを合わせると、その境界線の上部の色と兄弟が赤に変わります。

したがって、次のような HTML がある場合:

<dl>
  <dt>Example 1</dt>
  <dd>Description 1</dd>

  <dt>Example 2</dt>
  <dd>Description 2</dd>

  <dt>Example 3</dt>
  <dd>Description 3</dd>
</dl>

およびCSS:

dd {
    display: none;
}

dt {
    border-top: 1px solid black;
}

dt:last-of-type {
    border-bottom: 1px solid black;
}

dt:hover {
    border-top: 1px solid red;
}

dt:hover:last-of-type {
    border-bottom: 1px solid red;
}

dt:hover + dd + dt {
    border-top: 1px solid red;
}

期待した結果が得られません。最初の要素にカーソルを合わせると、上枠のみが赤に変わります。3 番目の要素にカーソルを合わせると、2 番目の要素と最初の要素にカーソルを合わせると、境界線は 2 番目の要素と最初の要素の赤に変わりますが、最後の状態では最初にのみ変更する必要があります。なぜそれが起こるのですか？

4

2 に答える 2

1

これは、何年も前から存在する複数の隣接する兄弟を持つ Webkit バグのケースのようです。多くのレポートの 1 つを参照してください。問題なく Firefox 21 と IE10 でテストしました。

これは、Chrome/ Webkitの1 つの隣接する兄弟セレクターの正しい動作を示す、Zenith のフィドルの修正版です。を省略しdd、CSS セレクターを に調整しましたdt:hover + dt(デモンストレーションのためです。もちろん、これは意味がありません)。

この問題を回避するための CSS ハックがありましたが、特定のプラットフォームで問題が発生します。あなたの最善の選択肢は、おそらく別のアプローチを使用して目的の効果を達成することです.

（申し訳ありませんが、これはおそらくあなたの質問へのコメントに属していますが、必要な評判がまだありません）

于 2013-06-07T15:12:24.863 に答える