如何在懸停的情況下平滑過渡？ [Tumblr Updates Tab]

我確信這件事已經回答過了，但我不確定該在哪裏尋找它，也不知道如何真正地說出問題。但基本上，我正在創建一個tumblr主題的更新選項卡，我很好奇如何讓div在父div上徘徊時如何順利過渡，如果這是有道理的。如何在懸停的情況下平滑過渡？ [Tumblr Updates Tab]

本質上，我希望div能順利過渡，當我將鼠標懸停在標籤上時，就像當我點擊我的更新標籤in my blog中的標籤時一樣。然而，這個標籤是使用一個使用jquery代碼創建平滑開放效果的教程創建的，我對jquery或javascript本人一無所知。

我有一個如何讓只有當您使用顯示懸停在父元素一個div節目的總體思路：無和顯示：塊 ...但它並不順利轉型，以及正如我讀過的那樣，用CSS無法做到這一點。

我試着玩高度和不透明度，但雖然它有點平滑，但處理文本和邊界的div我試圖顯示和隱藏是一個相當凌亂的過渡。

基本上我問的是如何在我的博客更新選項卡中創建相同的效果，該選項卡在單擊選項卡時打開和關閉，但使用懸停而不是單擊。當我在標籤上徘徊時，以及當鼠標位於包含div時，我會喜歡div顯示，但當鼠標離開標籤時關閉。對不起，如果這聽起來很混亂。

這裏是CSS：

#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：

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

的Jquery /或JavaScript？從我的博客的更新標籤教程：

 <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>

來源

2016-06-16 Katherine Moon

您可以張貼在教程的JavaScript？ – Ike10

它實際上可能是JavaScript ..對不起，我也不太瞭解，所以我很難說出不同之處。但是我已經將教程中給出的代碼添加到了原始文章中。 –

.label基本上是我正在處理的項目中的.tab文件，而.inside是爲此項目重命名的.contents。然而我的教程沒有包含#tab。 –

您可以使用CSS3過渡性質添加「平滑」的效果。唯一的問題是，它不適用於IE9和更早版本。你可以看到這樣的例子：here

來源

2016-06-16 00:33:04

我會試試看，謝謝！我不確定多數Tumblr用戶常常使用IE9和更早版本，但值得一試！ –

你可以這樣做。使用不透明度代替顯示和轉換。我添加了一些pointer-event，使它一旦被隱藏，不透明，就無法互動，它的行爲如同display: none。

#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; 
 
}

來源

2016-06-16 00:38:20

作爲替代，如果CSS3過渡不起作用，你可以試試這個：

<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>

來源

2016-06-16 00:38:24 Ike10

如何在懸停的情況下平滑過渡？ [Tumblr Updates Tab]

回答

相關問題