隣接兄弟セレクタを使用しているときにdivコンテンツを表示する方法

Question

私が達成しようとしているのは、divをイメージホバーで表示させ、次に表示されているdiv（イメージホバーまで隠されていた）ポインタは新たに表示されるdiv内にあります。

今、divをイメージホバーに表示するようにしましたが、divが表示されてdivをホバーすると、再び表示されませんでした。divを残しているとき（マウスオーバー時） 。

2番目のdivが表示され、その上を移動すると、再びフェードアウトします。ホバー上に表示されている間は、ポインタがそのdivを離れるときに消えるだけです。

私はコードを追加しました。 〜ホバー：あなたのコメントは、それが子のdivをすることができることを言うのオフに行く

.hiddenbox { 
 
    display: block; 
 
    position:absolute; 
 
    left:20%; 
 
    top:30%; 
 
    visibility: hidden; 
 
    width:450px; 
 
    z-index:2; 
 
    opacity:0; 
 
    -webkit-transition: all 1s ease; 
 
    -moz-transition: all 1s ease; 
 
    -o-transition: all 1s ease; 
 
    transition: all 1s ease; 
 
    outline: 9999px solid rgba(255,255,255,0); 
 
    background:#fff; 
 
    } 
 

 
#image { 
 
    z-index:1; 
 
    } 
 

 
#image:hover~.hiddenbox { 
 
    opacity:1; 
 
    outline: 9999px solid rgba(255,255,255,0.4); 
 
    visibility: visible; 
 
    } 
 

 
.hiddenbox:after, .hiddenbox:before { 
 
    right: 100%; 
 
    top: 20%; 
 
    border: solid transparent; 
 
    content: " "; 
 
    height: 0; 
 
    width: 0; 
 
    position: absolute; 
 
    pointer-events: none; 
 
    } 
 

 
.hiddenbox:after { 
 
    border-color: rgba(255, 43, 79, 0); 
 
    border-right-color: #ff2b4f; 
 
    border-width: 10px; 
 
    margin-top: -10px; 
 
    } 
 

 
.hiddenbox:before { 
 
    border-color: rgba(135, 126, 126, 0); 
 
    border-right-color: #877e7e 
 
    border-width: 0px; 
 
    margin-top: -16px; 
 
    }

<div id="image"><img src="http://placehold.it/350x150"></div> 
 
<div class="hiddenbox"><img src="http://placehold.it/200x100"></div>

Answer 1

は、私がイメージした後、画像のdiv内hiddenbox div要素を入れて、セレクタ」#imageを変更しました.hiddenbox "を" #image：hover .hiddenbox "に変更します。

.hiddenbox { 
 
    display: block; 
 
    position:absolute; 
 
    left:20%; 
 
    top:30%; 
 
    visibility: hidden; 
 
    width:450px; 
 
    z-index:2; 
 
    opacity:0; 
 
    -webkit-transition: all 1s ease; 
 
    -moz-transition: all 1s ease; 
 
    -o-transition: all 1s ease; 
 
    transition: all 1s ease; 
 
    outline: 9999px solid rgba(255,255,255,0); 
 
    background:#fff; 
 
    } 
 

 
#image { 
 
    z-index:1; 
 
    display: inline-block; 
 
    } 
 

 
#image:hover .hiddenbox { 
 
    opacity:1; 
 
    outline: 9999px solid rgba(255,255,255,0.4); 
 
    visibility: visible; 
 
    } 
 

 
.hiddenbox:after, .hiddenbox:before { 
 
    right: 100%; 
 
    top: 20%; 
 
    border: solid transparent; 
 
    content: " "; 
 
    height: 0; 
 
    width: 0; 
 
    position: absolute; 
 
    pointer-events: none; 
 
    } 
 

 
.hiddenbox:after { 
 
    border-color: rgba(255, 43, 79, 0); 
 
    border-right-color: #ff2b4f; 
 
    border-width: 10px; 
 
    margin-top: -10px; 
 
    } 
 

 
.hiddenbox:before { 
 
    border-color: rgba(135, 126, 126, 0); 
 
    border-right-color: #877e7e 
 
    border-width: 0px; 
 
    margin-top: -16px; 
 
    }

<div id="image"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <div class="hiddenbox"> 
 
    <img src="http://placehold.it/200x100"> 
 
    </div> 
 
</div>