向上滑动悬停，向下滑动悬停（没有独特的课程）

Question

我试图在其容器的悬停上向上滑动一个div，并在向下滑动时向下滑动，向上滑动可以正常工作，但无法滑出，它会立即消失。

我无法唯一识别每个容器，因为信息是从我无法控制的循环中提取出来的。

我明白为什么会发生这种情况 - 这是因为班级不再有悬停的显示屏，因此消失，但我不知道如何解决。我尝试过没有运气的延误。

小提琴这里：http://jsfiddle.net/u7ttx2dd/2/

HTML：

   <main> 
       <section class="entries"> 
      <section class="entry"> 
      <div class="container"> 
       <img width="800" height="533" src="http://isc.stuorg.iastate.edu/wp-content/uploads/sample.jpg"> 
       <div class="title"> 
        Title 
       </div> 
       <div class="hover" style="bottom: -1000px;"> 
        <div class="title"> 
         Title 
        </div> 
        <p> 
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nec quam et dui bibendum convallis. Morbi nec porta elit. Pellentesque 
        </p> 
       </div> 
      </div> 
      </section> 
      <section class="entry"> 
      <div class="container"> 
       <img width="800" height="533" src="http://isc.stuorg.iastate.edu/wp-content/uploads/sample.jpg"> 
       <div class="title"> 
        Title 
       </div> 
       <div class="hover" style="bottom: -1000px;"> 
        <div class="title"> 
         Title 
        </div> 
        <p> 
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nec quam et dui bibendum convallis. Morbi nec porta elit. Pellentesque 
        </p> 
       </div> 
      </section> 
      </main> 

jQuery的

  jQuery(".entries .entry .container").hover(
       function() { 
        jQuery(this).addClass("selected"); 
        jQuery(".entries .entry .container.selected .hover").stop().animate({bottom: '0'}, 1000); 
       }, 
       function() { 
        jQuery(".entries .entry .container .hover").stop().animate({bottom: '-1000'}, 1000); 
        jQuery(this).removeClass("selected"); 
       } 
      ); 

HTML

  main .entry { 
       overflow: hidden; 
       display: inline; 
       float: left; 
       width: 33.33333125%; 
       padding: 0 8px; 
       -webkit-box-sizing: border-box; 
       -moz-box-sizing: border-box; 
       box-sizing: border-box; 
       margin-bottom: 20px; 
      } 
      main .entry img { 
       display: block; 
       max-width: 100%; 
       height: 180px; 
      } 
      main .entry a { 
       color: #fff; 
       text-decoration: none 
      } 
      main .entry .container { 
       position: relative 
      } 
      main .entry .container.selected .hover { 
       display: block 
      } 
      main .entry .title { 
       background: #000; 
       color: #fff; 
       text-decoration: none; 
       font-size: 18px; 
       padding: 15px; 
      } 
      main .entry .hover { 
       background: #23252b; 
       color: #fff; 
       width: 100%; 
       height: 100%; 
       position: absolute; 
       left: 0; 
       bottom: -1000px; 
       display: none; 
       padding: 20px 20px 20px 20px; 
      } 
      main .entry .hover .title { 
       padding: 0; 
       background: none; 
       width: 80%; 
       margin-bottom: 30px; 
      } 
      main .entry .hover .moresmall:hover { 
       background-color: #2f3035 
      } 

Answer 1

我已经从CSS中删除了“显示”样式，将它留给了jQuery，并且它似乎修复了您所遇到的问题。

http://jsfiddle.net/u7ttx2dd/6/

main .entry { 
    overflow: hidden; 
    display: inline; 
    float: left; 
    width: 33.33333125%; 
    padding: 0 8px; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    margin-bottom: 20px; 
} 
main .entry img { 
    display: block; 
    max-width: 100%; 
    height: 180px; 
} 
main .entry a { 
    color: #fff; 
    text-decoration: none 
} 
main .entry .container { 
    position: relative 
} 
main .entry .container.selected .hover { 

} 
main .entry .title { 
    color: #fff; 
    text-decoration: none; 
    font-size: 18px; 
    padding: 15px; 
    background: #000; 
} 
main .entry .hover { 
    background: #000; 
    color: #fff; 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    left: 0; 
    bottom: -1000px; 
    padding: 20px 20px 20px 20px; 
} 
main .entry .hover .title { 
    padding: 0; 
    background: none; 
    width: 80%; 
    margin-bottom: 30px; 
} 
main .entry .hover .moresmall:hover { 
    background-color: #2f3035 
}