Javascript 当将鼠标悬停在另一个元素上时，如何使用jQuery更改具有转换的元素？

所以我有一个9个图标的列表，标题代表9个不同的服务领域。分为三行，三行使用浮点数等。每行下面都有一个描述和两个段落。我使用了“可见性：隐藏”和“高度：0px”来隐藏描述。不是同时。我想将鼠标悬停在图标上，并在其下方显示说明

我不认为我可以使用直接的CSS，除非有人不这么认为，因为我触发了一个元素并改变了另一个

  <div id="category1" class="category_col1 cathead">
  <div><img src="images/..." name="category1" class="image-item-lead"/>
    <h3>Type of category</h3>
  </div>
  <div id="category1description" class="hide">
  <p>Some content...</p>
  <p>Some more content...</p>
  </div>
</div>

我尝试过的jQuery如下所示：

围绕所有选项

$(document).ready(function(){
});

这项工作：

$('#category1').mouseover(function(event){
  $(#category1description).css('height','auto');
  });

但很明显，它会立即出现，我希望它会逐渐出现。 我试过：

$('#category1').mouseover(function(){
$('#category1descrioption').slideToggle('slow');
});

$('#category1').mouseover(function(){
$('#category1descrioption').animate({height: auto}, {duration:1500});
});

$('#category1').mouseover(function(event){
$('#category1descrioption').transition({height: auto}, ease, 1500);
 }); 

我肯定错过了一些东西。我希望有人能帮忙。

所有CSS：

.category_col1:hover .hide {
  height: 100px;
}

.hide {
  height:0px;
  overflow:hidden;
  transition: height 1.5s;
}

警告：设置的高度是由于不支持自动。如果使用“自动”，效果是即时的，而不是转换的，这是规范的一部分。计算出需要的高度，然后使用该长度值

选项2是将“最大高度”用于“高度：自动；”：

及

那么问题

无论如何，您必须就如何处理高度做出一些决定，因为“最大高度”方法会有一些动画计时问题，如果有些高度很小，则可能会导致悬停关闭时出现较大延迟，而有些高度很大，因为“最大高度”值将确定动画时间。请参阅已接受答案中的注释

选项3：使用JS/jQuery计算每个div的高度，并使用事件侦听器设置hover

slideToggle'slow；慢后缺少收盘报价

.category_col1:hover .hide {
  height: 100px;
}

.hide {
  height:0px;
  overflow:hidden;
  transition: height 1.5s;
}