마우스를 올리면 슬라이드가 올라옵니다 (고유 한 클래스가없는 경우)

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/

다른 모든 일을 할 때 간단한 일을 놓칠 수있는 방법 놀라운 daaammnnn

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 
}