숨기기 IMG의 onmouseenter와 쇼 사업부

Question

내가 가지고 템플릿 :

<div class="row flush" id="photos_list"> 
    <script id="photo_list_template" type="text/x-handlebars-template"> 
     {{#each this}} 
      <div class="3u photo"> 
       <div class="imageover"> 
        <h1></h1> 
       </div> 
       <img src="{{url}}" alt="{{title}}" name="{{model}}"/> 
      </div> 
     {{/each}} 
    </script> 
</div> 

그리고 내가 그것을 숨기고 imageover 사업부를 보여주기 위해, 하나 개의 이미지 위에 마우스를 가져 가면 내가 원하는. 지금까지 나는이 jQuery를 가지고,하지만 난 내가 뭘 잘못 이해하지 않습니다

$('#work-wrapper2 div.row').on('mouseenter mouseleave', 'img', function(e) { 
    var $title = $(this).attr('alt'); 
    var $model = $(this).attr('name'); 
    var $url = $(this).attr('src'); 
    if (e.type == 'mouseenter') { 
     $('img', this).hide(); 
    } else {} 
}); 

Answer 1

당신은 쉽게 단지 CSS를 사용하여 작업을 수행 할 수 있습니다.

다음은 예 : JSFiddle입니다.

.imageover { 
    display: none; 
} 

.photo:hover .imageover { 
    display: block; 
} 

.photo:hover img { 
    display: none; 
}