Question

所以我有一个9个图标列表，标题代表9个不同的服务领域。使用花车等分成三排三个。每个都有下面的描述（几段）。我使用了＆＃39; visibility：hidden＆＃39;和＆＃39;身高：0px＆＃39;隐藏说明。（不是在同一时间。）我想悬停或鼠标悬停图标，并在其下方显示说明。

我不认为我可以使用直接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>

我们每行再做两次。

应用于这些元素的CSS如下所示。

.category_col1 {float:left;
clear:left;
width:32%;
padding:.5em .5em .5em 0em;
}
.image-item-lead {width: 90%;
margin-left:auto;
margin-right:auto;
display:block;
}
.cathead {visibility:visible;
}
.hide {height:0px;
overflow:hidden;
}

我尝试过的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);
 });

我肯定在这里遗漏了一些东西。我希望有人可以提供帮助。

Answer 1

所有CSS：

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

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

警告：设置高度是由于不支持自动。如果使用auto，效果是瞬时而不是转换，这是规范的一部分。找出你需要的高度，并使用该长度值。

选项2是使用max-height作为height：auto; ：

How to animate height from 0 to auto using CSS Transitions article from bradshawenterprises.com

和

问题CSS transition height: 0; to height: auto;

不管怎样，你必须决定如何处理高度，因为最大高度方法会有一些动画计时问题，如果有些是小高度，可能会导致悬停的大延迟，有些很大，因为max-height值将决定动画时间。请参阅接受答案中的评论。

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

当将鼠标悬停在另一个元素上时，如何使用jQuery更改元素？

1 个答案: