javascript - 如何在悬停时在 div 中平滑过渡？ [Tumblr 更新选项卡]

Question

我确定之前已经回答过这个问题，但我不确定在哪里可以找到它，也不知道如何真正表达这个问题。但基本上，我正在为 tumblr 主题创建一个更新选项卡，我很好奇如何在将鼠标悬停在父 div 上时使 div 平滑过渡，如果这有意义的话。

本质上，当我将鼠标悬停在选项卡上时，我希望 div 能够顺利过渡，就像我单击更新选项卡中的选项卡时一样 in my blog .但是，此选项卡是使用使用 jquery 代码创建平滑打开效果的教程创建的，而我自己对 jquery 或 javascript 一无所知。

我大致了解如何使用 display:none 和 display:block 仅当您将鼠标悬停在父元素上时才显示 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？来 self 博客更新选项卡的教程:

     <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