Hovering divで遅れが発生する

Question

divにカーソルを移動したい。私は私のマウスと一緒にdivに遅れている。コンテンツがはっきりと表示されません。あなたはこれをしたい私のhtmlと私のCSSの

.unshow-txt:hover, 
 
.unshow-txt:focus, 
 
.unshow-txt:active { 
 
    display: none; 
 
} 
 

 
.show-txt { 
 
    display: none; 
 
    font-size: 18px; 
 
} 
 

 
.box:hover .show-txt, 
 
.box:focus .show-txt, 
 
.box:active .show-txt { 
 
    display: inline; 
 
}

<div class="box"> 
 
    <div class="unshow-txt"> 
 
    <div class="middle"> 
 
     <div class="circle-o"> 
 
     <i class="fa fa-eye fa-3x" aria-hidden="true"></i> 
 
     </div> 
 
    </div> 
 
    <h2 class="h2-bigger text-center">Vorausschauend</h2> 
 
    </div> 
 
    <div class="show-txt"> 
 
    <p>Some text</p> 
 
    </div> 
 
</div>

Answer 1

私は、■はdivの中でホバー効果を使用することをお勧めします。あなたが親でホバーアニメーションや子供を持っているので、バグが起こっている

.box:hover .unshow-txt, 
 
.box:hover .unshow-txt, 
 
.box:hover .unshow-txt { 
 
    display: none; 
 
} 
 

 
.show-txt { 
 
    display: none; 
 
    font-size: 18px; 
 
} 
 

 
.box:hover .show-txt, 
 
.box:focus .show-txt, 
 
.box:active .show-txt { 
 
    display: inline; 
 
}

<div class="box"> 
 
    <div class="unshow-txt"> 
 
    <div class="middle"> 
 
     <div class="circle-o"> 
 
     <i class="fa fa-eye fa-3x" aria-hidden="true"></i> 
 
     </div> 
 
    </div> 
 
    <h2 class="h2-bigger text-center">Vorausschauend</h2> 
 
    </div> 
 
    <div class="show-txt"> 
 
    <p>Some text</p> 
 
    </div> 
 
</div>

Answer 2

をHere's？ See this fiddle

私はテキストを表示するために兄弟のCSSセレクタを使用します。

.unshow-txt:hover ~ .show-txt, 
.unshow-txt:focus ~ .show-txt, 
.unshow-txt:active ~ .show-txt { 
    display: inline; 
}