jQuery 호버로 내 콘텐츠 표시 및 숨기기

Question

이미지 위로 마우스를 가져 가면 몇 가지 콘텐츠를 표시하려고합니다. 그 후에 다시 숨 깁니다. 내 문제는 내가 이미지 위에 마우스를 가져 가면 콘텐츠가 표시되지만 순간에는 볼 수 없으며 이미지 위에있는 동안 콘텐츠가 숨기고 표시되기 시작한다는 것입니다. 이미지를 떠날 때 내 콘텐츠는 숨겨져 있습니다.

이 내 jQuery 코드입니다 :

jQuery(document).ready(function($){ 

$('.opciones_imagen').hide(); 

    $('#id_imagen_1').hover(function(){ 
      $('.opciones_imagen').show(); 
     }, function(){ 
      $('.opciones_imagen').hide(); 
     }); 

}); 

그리고 이것은 내 HTML입니다 :

<div class="img1"> 

     {{ HTML::image(Session::get('url_imagen_1'), '', array('width' => '100%', 'id' => 'id_imagen_1', 'class' => 'show_imagen1')) }} 
     <div class="show_imagen_opciones1 opciones_imagen"> 
      <button type="button" class="btn btn-default btn-sm"> 
       <span class="glyphicon glyphicon-cog"></span> 
      </button>    
       <a href="" class="cambiar_imagen1" data-toggle="modal" data-target="#nuevaImagen1"> Cambiar imagen</a> 
       {{ link_to_route('session.eliminar', 'Eliminar', 'url_imagen_1', array('class' => 'eliminar_imagen1 btn btn-danger'))}} 
     </div> 
</div> 

편집 :

이 같은 CSS 그것을 시도했습니다

.opciones_imagen{ 
    display: none; 
} 

.show_imagen1:hover .opciones_imagen{ 
    display : block; 
} 

하지만 응답이 없습니다. 내가 뭔가를 잘못하고 있어요 ... :(

Answer 1

Dementic이 코멘트에이 작업에 대한 CSS를 사용 언급 한 바와 같이 :

.opciones_imagen { 
    display: none; 
} 
.opciones_imagen:hover { 
    display: block; 
}