ネストされた要素のCSSですぐにホバリングされた要素のみを選択する

Question

ネストされたコメントのコレクションがあります。私の目標は、各コメントを別々にホバリングするときに「返信」オプションを表示することです。これは、私がホバリングしているコメントの親/兄弟/子供に「返信」オプションを表示したくないことを意味します。

私が見つけた唯一の同様の質問は次のとおりです。Can I control CSS selection for :hover on nested elements?彼の必要性は同じであるとは確信していませんし、さらには手札が機能していないようです。

私はあなたがより良い私が何を意味するか見fiddleを用意しています：セレクタに>を使用すると、兄弟要素を無視するように動作しないこと

.comment { 
 
    padding: 10px; 
 
    border: 1px solid black; 
 
    margin-top: 10px; 
 
} 
 
.text {} .comment:hover > .reply { 
 
    display: inline-block; 
 
} 
 
.reply { 
 
    display: none; 
 
} 
 
.children-comments { 
 
    margin-left: 50px; 
 
    margin-top: 10px; 
 
}

<div class="comment"> 
 
    <a class="text">wohoo</a> 
 
    <a class="reply">reply</a> 
 
    <div class="children-comments"> 
 
    <div class="comment"> 
 
     <a class="text">wohoo</a> 
 
     <a class="reply">reply</a> 
 
     <div class="children-comments"> 
 

 
     </div> 
 
    </div> 
 
    <div class="comment"> 
 
     <a class="text">wohoo</a> 
 
     <a class="reply">reply</a> 
 
     <div class="children-comments"> 
 
     <div class="comment"> 
 
      <a class="text">wohoo</a> 
 
      <a class="reply">reply</a> 
 
      <div class="children-comments"> 
 
      <div class="comment"> 
 
       <a class="text">wohoo</a> 
 
       <a class="reply">reply</a> 
 
       <div class="children-comments"> 
 

 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="comment"> 
 
     <a class="text">wohoo</a> 
 
     <a class="reply">reply</a> 
 
     <div class="children-comments"> 
 

 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

お知らせが、それはまだ親を選択要素。言い換えれば、どのコメントにコメントをつけても、それらの親は常に「返信」オプションを表示します。

これはCSSでのみ行うことができますか？私はjsソリューションを公開していますが、CSSのみのソリューションがあれば嬉しいです。個別.content:hover > .reply

例を使用して、あなたはコメントをターゲットにすることができ、コンテンツのためのdivラッパーを追加することにより

<div class="comment"> 
    <div class="content"> <!-- Here --> 
    <a class="text">wohoo</a> 
    <a class="reply">reply</a> 
    </div> 

：

Answer 1

あなたの最良のオプションは、マークアップを少し変更し、ラッパーを追加するために次のようになります。

.comment { 
 
    padding: 10px; 
 
    border: 1px solid black; 
 
    margin-top: 10px; 
 
} 
 

 
.text {} 
 

 
.content:hover > .reply { 
 
    display: inline-block; 
 
} 
 

 
.reply { 
 
    display: none; 
 
} 
 

 
.children-comments { 
 
    margin-left: 50px; 
 
    margin-top: 10px; 
 
}

<div class="comment"> 
 
    <div class="content"> 
 
    <a class="text">wohoo</a> 
 
    <a class="reply">reply</a> 
 
    </div> 
 
    <div class="children-comments"> 
 
    <div class="comment"> 
 
     <div class="content"> 
 
     <a class="text">wohoo</a> 
 
     <a class="reply">reply</a> 
 
     </div> 
 
     <div class="children-comments"> 
 
     <div class="comment"> 
 
      <div class="content"> 
 
      <a class="text">wohoo</a> 
 
      <a class="reply">reply</a> 
 
      </div> 
 
     </div> 
 
     <div class="children-comments"> 
 
      <div class="comment"> 
 
      <div class="content"> 
 
       <a class="text">wohoo</a> 
 
       <a class="reply">reply</a> 
 
      </div> 
 
      <div class="children-comments"> 
 
       <div class="comment"> 
 
       <div class="content"> 
 
        <a class="text">wohoo</a> 
 
        <a class="reply">reply</a> 
 
       </div> 
 
       <div class="children-comments"> 
 

 
       </div> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="comment"> 
 
     <div class="content"> 
 

 
      <a class="text">wohoo</a> 
 
      <a class="reply">reply</a> 
 
      <div class="children-comments"> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div>

コンテンツラッパーは、コメントの実際の内容の領域に展開されます（これは最も理にかなっています）。

しかし、ラッパーを位置付けスタイルを使用してコメントブロック全体（コメントの内容以上）に展開することもできます。例：

/* OPTIONAL - These style changes make the content 
* wrapper cover the entire comment block. 
*/ 
.comment { 
    padding: 10px; 
    border: 1px solid black; 
    margin-top: 10px; 
    position:relative; 
} 

.comment .content { 
    width:100%; 
    height:100%; 
    position:absolute; 
    top:0; 
    left:0; 
} 

これは、使用している動作によって異なります。

（jsFiddle example）

Answer 2

せずに、あなたのマークアップを変更し、代わりに親.commentをホバリング、あなたは（+を使用して）隣接兄弟を置くことができ.text（それは常に存在しているため）

.comment { 
 
    padding: 10px; 
 
    border: 1px solid black; 
 
    margin-top: 10px; 
 
} 
 
.text { 
 
    display:inline-block 
 
} 
 
.text:hover + .reply { 
 
    display: inline-block; 
 
} 
 
.reply { 
 
    display: none; 
 
} 
 
.children-comments { 
 
    margin-left: 50px; 
 
    margin-top: 10px; 
 
}

<div class="comment"> 
 
    <a class="text"> wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo </a> 
 
    <a class="reply">reply</a> 
 
    <div class="children-comments"> 
 
    <div class="comment"> 
 
     <a class="text">wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo </a> 
 
     <a class="reply">reply</a> 
 
     <div class="children-comments"> 
 

 
     </div> 
 
    </div> 
 
    <div class="comment"> 
 
     <a class="text">wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo </a> 
 
     <a class="reply">reply</a> 
 
     <div class="children-comments"> 
 
     <div class="comment"> 
 
      <a class="text"> wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo </a> 
 
      <a class="reply">reply</a> 
 
      <div class="children-comments"> 
 
      <div class="comment"> 
 
       <a class="text"> wohoo wohoo wohoo wohoo </a> 
 
       <a class="reply">reply</a> 
 
       <div class="children-comments"> 
 

 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="comment"> 
 
     <a class="text"> wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo </a> 
 
     <a class="reply">reply</a> 
 
     <div class="children-comments"> 
 

 
     </div> 
 
    </div> 
 
    </div> 
 
</div>