如何在悬停时在 div 中平滑过渡？ [Tumblr 更新标签]答案

【问题标题】：How can I smoothly transition in a div on hover? [Tumblr Updates Tab]如何在悬停时在 div 中平滑过渡？ [Tumblr 更新标签]
【发布时间】：2016-06-16 08:44:15
【问题描述】：

我确信这个问题之前已经回答过了，但我不知道在哪里可以找到它，也不知道如何准确地表达这个问题。但基本上，我正在为 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？来自我博客更新选项卡中的教程：

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

【问题讨论】：

你能把教程中的javascript贴出来吗？
它实际上可能是 javascript.. 抱歉，我对两者都不太了解，所以我很难分辨出其中的区别.. 但我已将教程中给出的代码添加到我的原帖。
.label 本质上是我正在处理的项目中的 .tab，而 .inside 是为这个项目重命名的 .contents。但是，我的教程没有包含 #tab。

标签： javascript jquery html css

【解决方案1】：

您可以使用 CSS3 过渡属性来添加“平滑”效果。唯一的“问题”，它不适用于 IE9 和更早版本。你可以看到这样的例子：here

【讨论】：

我会试试的，谢谢！我不确定 IE9 及更早版本在大多数 Tumblr 用户中有多普遍，但值得一试！

【解决方案2】：

您可能可以这样做。使用不透明度代替显示和过渡。我添加了一些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;
}

【讨论】：

【解决方案3】：

作为替代方案，如果 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>

【讨论】：