divでホバーをスムーズに切り替えるにはどうしたらいいですか？ [Tumblr Updates Tab]

Question

これまでにこれまでに答えられていると確信していますが、どこを探しているのか、本当に質問する方法がわかりません。しかし、基本的には、tumblrテーマの更新タブを作成しています。親divの上にマウスカーソルを置いてdivをスムーズに移行させる方法が好奇妙なのは興味深いです。

更新タブのタブをクリックしたときと同じように、本来はdivをスムーズに移行したいと思っていますin my blog。ただし、このタブはjqueryコードを使用してスムーズなオープニング効果を作成するチュートリアルを使用して作成され、jqueryまたはjavascriptについてはわかりません。

私はあなたがディスプレイ使用して、親要素の上にカーソルを置く場合にのみ、divのショーを作成する方法の一般的な考え方があります：なしと表示：ブロックを...しかし、それはスムーズで遷移しない、と私が読んだとおり、CSSを使う方法はありません。

私も高さと不透明度で再生しようとしましたが、少しスムーズでしたが、表示と非表示をしようとしているdivのテキストと境界を扱うのは面倒な移行でした。

基本的には、ブログの更新タブで、タブをクリックしたときに開閉する同じ効果を、クリックするのではなくホバーを使用して作成する方法があります。私は、タブ上にマウスを置いたときだけでなく、マウスが含まれているdiv内にあるときに表示するdivが大好きですが、マウスがタブを離れると閉じます。ごめんなさい。

  <div id="tab"> 
 
     <div class="tab">Tab</div> 
 
     <div class="contents"> 
 
       
 
      Tab Contents. 
 
       
 
     </div> 
 
     </div> 
 

のjQuery /またはJavaScript：

#tab{ 
 
    margin:auto; 
 
} 
 

 
.tab{ 
 
    margin-top:0px; 
 
    margin-bottom:2px; 
 
    margin-left:-5px; 
 
    margin-right:-5px; 
 
    padding:7px; 
 
    border:1px solid #000000; 
 
    text-align:center; 
 
} 
 

 
#tab:hover .contents{ 
 
    display:block; 
 
} 
 

 
.contents{ 
 
    display:none; 
 
    margin-top:3px; 
 
    margin-bottom:3px; 
 
    margin-left:10px; 
 
    margin-right:10px; 
 
    padding:5px; 
 
    border:1px solid #000000; 
 
    text-align:center; 
 
    font-size:11px; 
 
}

ここ

は、そのCSSのHTMLです：ここで

はCSSのですか？私のブログの更新情報]タブからチュートリアルから：

 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> 
 
<script> 
 
$(document).ready(function(){ 
 
$(".inside").hide(); 
 
$(".label").click(function(){ 
 
$(this).next(".inside").slideToggle('slow'); 
 
}); 
 
}); 
 
</script>

Answer 1

あなたは「スムーズ」効果を追加するにはCSS3の遷移プロパティを使用することができます。その唯一の「問題」は、IE9およびそれ以前のバージョンでは機能しません。あなたはそれの例を見ることができます：here

Answer 2

これはおそらくこのようにすることができます。ディスプレイとトランジションの代わりに不透明度を使用します。私はいくつかpointer-eventを追加し、それを一度隠すと、不透明度によって、それを操作することはできません。それはdisplay: noneのように動作します。 CSS3トランジションが動作しない場合の代替案として

#tab{ 
 
    margin:auto; 
 
} 
 

 
.tab{ 
 
    margin-top:0px; 
 
    margin-bottom:2px; 
 
    margin-left:-5px; 
 
    margin-right:-5px; 
 
    padding:7px; 
 
    border:1px solid #000000; 
 
    text-align:center; 
 
} 
 

 
#tab:hover .contents{ 
 
    opacity: 1.0 
 
} 
 

 
.contents{ 
 
    opacity: 0.0; 
 
    margin-top:3px; 
 
    margin-bottom:3px; 
 
    margin-left:10px; 
 
    margin-right:10px; 
 
    padding:5px; 
 
    border:1px solid #000000; 
 
    text-align:center; 
 
    font-size:11px; 
 
    transition: opacity 100ms ease-in-out; 
 
    pointer-events: none; 
 
}

Answer 3

、あなたはこれを試すことができます。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
    $(".inside").hide(); 
    $(".label").click(function(){ 
    $(this).next(".inside").slideToggle('slow'); 
    }); 

    $(document).on("hover", ".label", function(){ 
    $(this).next(".inside").slideToggle('slow'); 
    }); 
}); 
</script>