4

クラス .text で div を非表示にしています

 div.text{

 visibility:hidden;
      }

この div は、クラス .col3 の別の div に囲まれています

<div class="col3">
 <div class="image-box">
 <div class="text"> test </div>
 </div>
</div>

col3にカーソルを合わせたときに可視性を「可視」に変更したい

私は試した

.col3:hover + div.text {

visibility:visible;
}

ただし、この方法では機能しないようです。不思議なことは、私がすると

 .image-box:hover + div.text{
 visibility:visible;
  }

画像ボックスにカーソルを合わせるとテキスト div が表示されますが、それは私が望むものではありません。周囲の div にカーソルを合わせると表示されるようにしたい......

どんな助けでも大歓迎です...

4

3 に答える 3

3

これはうまくいくはずです：

.col3:hover div.text {
    visibility:visible;
 }

セレクターの使用は+、最初の要素の直後にある要素を対象とするため、正しくありません。詳細については、こちらをご覧ください。

于 2013-10-28T10:20:30.533 に答える
3

+CSS では、「隣接兄弟コンビネータ」として知られています。兄弟は、別の要素と同じ親に含まれる要素です。この場合、.image-box要素は要素の兄弟です.text。これらの要素は両方とも、要素の子です.col3。.textの兄弟ではないため、最初のセレクターは何も選択しません.col3。

子孫コンビネータのいずれかを使用する必要があります:

.col3:hover div.text {
    visibility: visible;
}

または子コンビネータ:

.col3:hover > div.text {
    visibility: visible;
}
于 2013-10-28T10:23:32.910 に答える
2

あなたの理由

.col3:hover + div.text

隣接するセレクターを使用しているため、機能していません。あなたが基本的に言っているのは、「.col3と同じレベルにあるクラステキストを含むdivノードを取り、.col3がホバーされたときに何かをする」ということです。しかし、何もありません。div.text は .col3 と同じレベルではなく、その直接の子です。

あなたがしたいことは次のとおりです。

.col3:hover > div.text {
    visibility:visible;
}

これは、「.col3 の直接の子ノードである div.text を取得し、.col3 がホバーされているときに何かを実行する」ことを示しています。

于 2013-10-28T10:22:16.363 に答える