我需要什么样的脚本才能让一个隐藏的 div 从中间的 2 div 中出现，在悬停时向上推动一个，向下推动一个

Question

我需要什么样的脚本才能让一个隐藏的 div 从中心的 2 div 秒中出现，在悬停时推动一上一下？我不是最擅长 jquery 的人，所以我不确定我需要搜索什么代码。

我目前有一个隐藏的文本，当鼠标悬停在标题上时，文本会出现，但它会为文本留下一个长长的空白 space，即使它是隐藏的。然后我将 header div 变小了，但是当你将鼠标悬停在它上面时，出现的文本会显示在我的按钮上。

What I'm looking to achieve (the 4 boxes of hover):

我有：

https://jsfiddle.net/alexisdeals/7398hnbz/

#text {
  visibility: hidden;
}
.content:hover #text {
  visibility: visible;
}

<div id="test2" style="border:thin solid #aaa">
  <div style="float: left; text-align: center;" id="one">
    <div class="content" onMouseOver="show('text')" onMouseOut="hide('text')">
      <h3><a title="First Aid/CPR" href="#" style="color:#212121!important; font-weight:900;">First Aid/CPR</a></h3>
      <div>
        <p style="float: left; text-align: center;" id="text">Learn skills to save a life and receive a two-year certificate that meets American Heart Association standards.</p>
      </div>
    </div>
  </div>

  <div id="button" style="text-align:center">LEARN MORE</div>
</div>

Answer 1

您使用display: none; display: block;，visible 属性将隐藏该元素但仍占用隐藏元素将占用的space。

https://jsfiddle.net/7398hnbz/1/

我也删除了 float: left;，他们没有理由在那里。但是你不需要 javascript 或 jQuery 来完成这个任务，它可以用纯 css 来完成。

Answer 2

你快到了。

你只需要在那边使用 display:none 和 display:block。

Answer 3

为了从你给的网站上得到你想要的效果我做了一些调整：

https://jsfiddle.net/ac0fh6qf/

我为内容添加了垂直对齐，并为动画添加了一些 jQuery 幻灯片 up/down。我还删除了 float:left; 和 visibility:hidden;，我用更方便的 display:none; 代替了它。

Answer 4

就像@Dejan.S说的，你不需要JavaScript。相反，您可以只转换一些 CSS 属性。这里是 font-size.

#text {
  font-size: 0%;
  transition: 0.5s;
}

.content:hover #text {
  font-size: 1rem;
}

我还在这个 Codepen 中删除了你所有的内联样式：http://codepen.io/SteveClason/pen/wWaZgX

Answer 5

创建 js 文件并调用它和 jQuery lib in yout *.HTML 脚本
自定义您的代码如下

在js脚本中写这段代码

$(document).ready(function(){

$(".title").hover(
    function(){ 
        $(".middle").animate({
          height : '70px' , 
          fontSize : '18px'
          },600);

  } , 

  function(){ 
       $(".middle").animate({
            height : '0' ,
            fontSize : '0'
            },600);
    }
  );

});

Html 脚本：

  <div id="test2" >

    <div class="title"> First Aid/CPR </div>

      <div class="middle"> 
               Learn skills to save a life and receive a 
                two-year certificate that meets American 
                Heart Association standards.

      </div>

        <div> learn More </div>

    </div>

Css 样式表：

#test2
{
    border:thin solid #aaa ; 
    text-align:center ; 
    margin-top:150px; 
    padding:30px;
}


.middle
   {
   height: 0 !important;
   line-height: 70px;
   color:red;
   font-size: 0;
   position: relative;

  }

它必须工作

我需要什么样的脚本才能让一个隐藏的 div 从中间的 2 div 中出现，在悬停时向上推动一个，向下推动一个

What kind of script do I need to have a hidden div emerge from 2 divs in the center pushing one up and one down on hover

jquery

html

sliding

Html 脚本：

Css 样式表：