不透明度と可視性を遷移させる

Question

私は、ホールドされるまでvisibility: hiddenの要素を持ち、良いフェードのために不透明度に遷移します。問題は、要素が瞬時に不透明度の遷移を隠すvisibility: hiddenになると、フェードが一方向にしか機能しないということです。これを回避するにはどうしたらいいですか？

編集：明らかにするには、ホバーがアクティブになるまで要素にvisibility: hiddenがあることが重要です。 の要素はできませんが、opacity: 0の要素は相互作用できます。

以下の例。どのようにポップアップが消えていくのか気づかないでください。

.hover { 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 

 
.label { 
 
    width: 80px; 
 
    border: 1px solid black; 
 
    padding: 20px; 
 
} 
 

 
.popup { 
 
    width: 90px; 
 
    padding: 15px; 
 
    position: absolute; 
 
    top: 100%; 
 
    border: 1px dashed black; 
 
    cursor: pointer; 
 
    
 
    visibility: hidden; 
 
    opacity: 0; 
 
    transition: opacity 3s; 
 
} 
 

 
.hover:hover .popup { 
 
    visibility: visible; 
 
    opacity: 1; 
 
}

<div class="hover"> 
 
    <div class="label">Hover me</div> 
 
    <div class="popup">I am only visible on hover</div> 
 
</div>

Answer 1

でなければなりません。

だけでCSSの部分の下に

.popup { 
    width: 90px; 
    padding: 15px; 
    position: absolute; 
    top: 100%; 
    border: 1px dashed black; 
    cursor: pointer; 
    visibility: hidden; 
    opacity: 0; 
    transition: all 3s; /*Change the opacity to all*/ 
} 

.hover { 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 

 
.label { 
 
    width: 80px; 
 
    border: 1px solid black; 
 
    padding: 20px; 
 
} 
 

 
.popup { 
 
    width: 90px; 
 
    padding: 15px; 
 
    position: absolute; 
 
    top: 100%; 
 
    border: 1px dashed black; 
 
    cursor: pointer; 
 
    visibility: hidden; 
 
    opacity: 0; 
 
    transition: all 3s; /*Change the opacity to all*/ 
 
} 
 

 
.hover:hover .popup { 
 
    visibility: visible; 
 
    opacity: 1; 
 
}

<div class="hover"> 
 
    <div class="label">Hover me</div> 
 
    <div class="popup">I am only visible on hover</div> 
 
</div>

Answer 2

その不透明度が0

あるとき、あなたはとにかくそれは表示されませんので、あなたは、私が実際にまさにあなたのケースを知らない.popupクラスのvisibility:hidden;は必要ありません。です。これがあなたが探しているものでない場合は、より具体的に説明してください。

---

私はあなたのケースに合わせてコードを更新しました。私はvisibility:hiddenの代わりにdisplay: noneを使い、単純なJqueryコードを挿入します。

.popupをクリックすると表示されている場合は、.labelをクリックしてください。そのためのjQueryのコードを使用すると、transitionあなたはallを使用するか、プロパティ名を使用する必要がありますいくつかのプロパティを動作する必要がある場合にのみ、opacityにtransitionを適用

$(document).ready(function(){ 
    $(".label").click(function(){ 
     $(".popup").slideToggle("slow"); 
    }); 
}); 

$(document).ready(function(){ 
 
    $(".label").mouseover(function(){ 
 
    $(".popup").stop().slideDown("slow"); 
 
    }); 
 
    $(".popup").mouseout(function(){ 
 
    $(".popup").slideUp("slow"); 
 
    }); 
 
});

.hover { 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 

 
.label { 
 
    width: 80px; 
 
    border: 1px solid black; 
 
    padding: 20px; 
 
} 
 

 
.popup { 
 
    width: 90px; 
 
    padding: 15px; 
 
    position: absolute; 
 
    top: 100%; 
 
    border: 1px dashed black; 
 
    cursor: pointer; 
 
    
 
    display: none; 
 
    opacity: 1; 
 
    transition: opacity 3s; 
 
} 
 

 
/*.hover:hover .popup { 
 
    visibility: visible; 
 
    opacity: 1; 
 
}*/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="hover"> 
 
    <div class="label">Hover me</div> 
 
    <div class="popup">I am only visible on hover</div> 
 
</div>