別の子divを上に置いたときの子divの外観の変更

JSを使用せずにこれが可能かどうかわかりません。別の子divを上に置いたときの子divの外観の変更

基本的には、画像をマウスオーバーすると、この画像が点灯し、その情報が以下に表示されます。イメージのロールオーバー効果は簡単ですが、その下に説明を表示するのは難しいです。私はこれをツールチップとして行うことができますが、望ましい効果はページに表示することです。

は

https://i.stack.imgur.com/CsB1A.png

例を参照してください、私はこれを行う方法は、別々の子のdivに各画像を配置することであると信じています。次に、これらの子divのいずれかのロールオーバーで、別の情報divを「display：none」から「display：block」に変更します。

質問はどのように私は1つの子divのホバーセレクターを別の子供divに影響を与えるのですか？それを動作するように管理され

html, page { 
 
    \t margin: 0px; 
 
    \t padding: 0px; 
 
    \t width: 100%; 
 
    \t font-family: sans-serif; 
 
    } 
 
    
 
    
 
    .parent { 
 
    \t border: 1px solid fuchsia; 
 
    \t padding: 1%; 
 
    \t height: 360px; 
 
    \t width: 60%; 
 
    \t min-width: 600px; 
 
    \t max-width: 1200px; 
 
    \t margin: 0 auto; 
 
    \t display: flex; 
 
    \t flex-wrap: wrap; 
 
    \t justify-content: space-between; 
 
    \t } 
 
    
 
    .child { 
 
    \t display: block; 
 
    \t background: white; 
 
    \t height: 120px; 
 
    \t width: 120px; 
 
    \t border: 2px solid purple; 
 
    \t border-radius: 80px; 
 
    \t text-align: center; 
 
    \t line-height: 120px; 
 
    \t 
 
    } 
 
    
 
    
 
    .child:hover { 
 
    \t background: cyan; 
 
    \t border: 2px solid cyan; 
 
    } 
 
    
 
    .p1 { 
 
    \t display: none; \t 
 
    } 
 
    
 
    
 
    .p2 { 
 
    \t display: none; \t 
 
    } 
 
    
 
    
 
    .p3 { 
 
    \t display: none; \t 
 
    } 
 
    
 
    .p4 { 
 
    \t display: none; \t 
 
    } 
 
    
 
    
 
    .1:hover ~ .p1{ 
 
    \t display: block; 
 
    } 
 
    
 
    
 
    .2:hover ~ .p2{ 
 
    \t display: block; \t 
 
    } 
 
    
 
    .3:hover ~ .p3{ 
 
    \t display: block; \t 
 
    } 
 
    
 
    .4:hover ~ .p4{ 
 
    \t display: block; \t 
 
    } 
 
    
 
    
 
    .childinfo { 
 
    \t width: 100%; 
 
    \t height: 200px; 
 
    \t border: 2px solid cyan; 
 
    \t margin-bottom: 0px; 
 
    \t padding: 1%; 
 
    \t text-align: center; 
 
    }

<html> 
 
    
 
    
 
    <body> 
 
    
 
    <div class="parent"> 
 
    
 
    <div class="child 1">Child1</div> 
 
    <div class="child 2">Child2</div> 
 
    <div class="child 3">Child3</div> 
 
    <div class="child 4">Child4</div> 
 
    
 
    <div class="childinfo"> 
 
    <br><strong>Child Info Div</strong> 
 
    
 
    
 
    <span class="p1">This is info about child 1 div</span> 
 
    <span class="p2">This is info about child 2 div</span> 
 
    <span class="p3">This is info about child 3 div</span> 
 
    <span class="p4">This is info about child 4 div</span> 
 
    
 
    </div> 
 
    
 
    
 
    
 
    </div> 
 
    
 
    </body> 
 
    
 
    
 
    </html>

出典

2017-12-29 Leigh Masson

使用[一般兄弟コンビネータ]（https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_selectors） – fen1x

このに行くを与えた - ませんでした作業。おそらく兄弟の組み合わせは、ホバーセレクタと一緒に使用するとうまくいかないでしょうか？コードは元の投稿で更新されました。私が何かを逃しているかどうか知らせてください。 –

。

クリーンなCSSではなく、同じプロパティを複製する多くのクラスがあります。一般的な兄弟•

観察

しか働いていたコンビネータ私は/非表示を表示したい情報が他の子供のdivではありませんでした提供。 •は、セパレータのdiv（幅：100％）を使用し、これがそう見ていない代わりにdivを

私が実現

の情報を含むように<span>を代わりに使用 •ホバーに表示される情報から、トップの子供たちを分離するためにフラッシュが、私は画像で自分のサイトにセクションを作成し、ここでリンクします。

body, html { 
 
    padding: 0px; 
 
    margin: 0px; 
 
    font-family: sans-serif; 
 
} 
 

 
span { 
 
margin: 0 auto; 
 
} 
 

 
.parent { 
 
    margin: 0 auto; 
 
    display: flex; 
 
\t flex-wrap: wrap; 
 
\t justify-content: space-between; 
 
    width: 80%; 
 
    min-width: 816px; 
 
    height: 300px; 
 
    border: 2px solid fuchsia; 
 
    text-align: center; 
 
} 
 

 
.divider { 
 
    width: 100%; 
 
    height: 8px !important; 
 
    border: #cccccc; 
 
} 
 

 
.child1 { 
 
    width: 200px; 
 
    height: 200px; 
 
    border: 2px solid purple; 
 
    display: inline-block; 
 
    border-radius: 120px; 
 
    text-align: center; 
 
    line-height: 200px; 
 
} 
 

 
.child1:hover { 
 
    background: cyan; 
 
    border: 2px solid cyan; 
 
} 
 

 
.child1:hover ~ span.p1 { 
 
    display: block; 
 
} 
 

 
.child2 { 
 
    width: 200px; 
 
    height: 200px; 
 
    border: 2px solid purple; 
 
    display: inline-block; 
 
    border-radius: 120px; 
 
    text-align: center; 
 
    line-height: 200px; 
 
} 
 

 
.child2:hover { 
 
    background: cyan; 
 
    border: 2px solid cyan; 
 
} 
 

 
.child2:hover ~ span.p2 { 
 
    display: block; 
 

 
} 
 

 
.child3 { 
 
    width: 200px; 
 
    height: 200px; 
 
    border: 2px solid purple; 
 
    display: inline-block; 
 
    border-radius: 120px; 
 
    text-align: center; 
 
    line-height: 200px; 
 
} 
 

 
.child3:hover { 
 
    background: cyan; 
 
    border: 2px solid cyan; 
 
} 
 

 
.child3:hover ~ span.p3 { 
 
    display: block; 
 

 
} 
 

 
.child4 { 
 
    width: 200px; 
 
    height: 200px; 
 
    border: 2px solid purple; 
 
    display: inline-block; 
 
    border-radius: 120px; 
 
    text-align: center; 
 
    line-height: 200px; 
 
} 
 

 
.child4:hover { 
 
    background: cyan; 
 
    border: 2px solid cyan; 
 
} 
 

 
.child4:hover ~ span.p4 { 
 
    display: block; 
 
} 
 

 

 
span { 
 
    display: none; 
 
}

<div class="parent"> 
 

 
<div class="child1">child 1</div> 
 
<div class="child2">child 2</div> 
 
<div class="child3">child 3</div> 
 
<div class="child4">child 4</div> 
 

 
<div class="divider"></div> 
 
<!--/invisible divider ensures information and descriptions go to next line in the flex box--> 
 

 
<span class="p1">Here is info about child 1</span> 
 
<span class="p2">Here is info about child 2</span> 
 
<span class="p3">Here is info about child 3</span> 
 
<span class="p4">Here is info about child 4</span> 
 

 
</div><!--/ parent div-->

出典

2017-12-29 08:25:58

別の子divを上に置いたときの子divの外観の変更

答えて

関連する問題