他のものを選択/選択するときにDivのコンテンツを非表示にしています。私は何を達成しようとしているのかを説明するために大雑把なコードをまとめました。CSSコンテンツを非表示にして表示する
http://codeply.com/go/EsrJ8Rl1P8
Ivの..基本的に私は他の画像が推移や携帯電話であればタップされたら、表示しないように、最初のテキストを必要とするが、その画像がホバーか、再度タップされている場合、明らかに再表示'cssセレクタについて読んでいましたが、私はこれを理解できません。
ありがとうございました。
CSSの構文は唯一の子要素とそれに続く兄弟要素を選択することができますが、あなたは最初の要素を表示するには、フレキシボックス属性orderを利用することができます - それは実際にそれに続く兄弟要素だにもかかわらず。
body {
display: flex;
}
section {
width: 160px;
height: 160px;
margin-right: 40px;
text-align: center;
font-weight: bold;
color: rgb(255,255,255);
background-color: rgb(255,0,0);
order: 1;
}
.initial {
order: 0;
}
.icon {
display:block;
margin: 10px auto;
width: 60px;
height: 60px;
}
p, section:hover ~ section p {
display: none;
}
.initial p, section:hover p {
display: block;
}<section>
<div class="icon" />Hover over me</div>
<p>When this text is visible, I need the others to vanish!</p>
</section>
<section>
<div class="icon" />Hover over me</div>
<p>When this text is visible, I need the others to vanish!</p>
</section>
<section class="initial">
<div class="icon" />Hover over me</div>
<p>This is visible initially</p>
</section>
、質問にあなたの「* [MCVE] *」のコードを持参するのを助けるために私たちは、インターネットの周りに盲目的にリンクをたどることを期待しないでください、これまでその外部リソースをすべきくださいどのような方法でも移動、削除、または再編成されると、将来あなたの質問を見ている人にとってリンクは全く役に立たなくなります。 –
これを実現するにはjavascriptまたはjqueryが必要です。また、あなたのコードにはいくつか問題があります。 – Gaurravs
@DavidThomasは正しいですが、外部リンクが変更され、将来の検索で問題を無用にする可能性があります。また、失礼/攻撃的なコメントも表示されました。 – Toby