Question

我正在尝试获取一个处理悬停状态的背景列表，这些列表将扩展悬停的元素并降低高度或未定位的元素。

这是我小提琴的链接。

<div class="container">
<ul class="list">
    <li class="test1"></li>
    <li class="test2"></li>
    <li class="test3"></li>
    <li class="test4"></li>
</ul>

.list li {
width:100%;
height: 150px;
display: block;

-webkit-transition: all 0.3s ease;                  
-moz-transition: all 0.3s ease;                 
-o-transition: all 0.3s ease;   
-ms-transition: all 0.3s ease;          
transition: all 0.3s ease;

}

.list ul {
    min-height: 600px !important;
    display: block;
}
.test1 {
    background: url("http://www.desktopwallpaperhd.net/wallpapers/5/e/flying-background-plane-wallpaper-58814.jpg") no-repeat center center;
}
.test2 {
   background: url("http://www.desktopwallpaperhd.net/wallpapers/5/e/flying-background-plane-wallpaper-58814.jpg") no-repeat center center;
}
.test3 {
    background: url("http://www.desktopwallpaperhd.net/wallpapers/5/e/flying-background-plane-wallpaper-58814.jpg") no-repeat center center;
}
 .test4 {
    background: url("http://www.desktopwallpaperhd.net/wallpapers/5/e/flying-background- plane-wallpaper-58814.jpg") no-repeat center center;
 }

.container {
    height: 100%;
    max-height:600px !important;
    overflow: hidden;
    width: 100%;
    display: block;
    margin: 0 auto;
}

    $( ".list li" ).hover(
  function() {
      $( this ).css('height','200px');
      $( ".list li" ).not( this ).css('height','100px');
  }, function() {
      $( this ).css('height','150px');
      $( ".list li" ).not( this ).css('height','150px');
  }
);

我遇到的问题是整个容器没有保持相同的高度。 IT意味着当您将鼠标悬停在元素上时，整个容器都会上升到。设置最小高度是不够的，所以它始终保持600px高度，元素根据这个高度调整高度？

我尝试使用百分比，但没有运气。

Answer 1

更改

$( ".list li" ).not( this ).css('height','100px');

到

 $( ".list li" ).not( this ).css('height','133px');

和CSS

.list ul {
height: 600px;
display: block;
}

see fiddle here

另外，我会改变这一行

$(this).css('height', '200px');

到

$(this).css('height', '201px');

弥补1px的差异，但它不是很明显，如果你不想

，真的不需要

Html列表展开hover min-height

1 个答案: