Javascript jQuery悬停显示和隐藏我的内容

当我将鼠标悬停在图像上时，我试图显示一些内容。。。然后再把它藏起来。我的问题是，当我将鼠标悬停在图像上时，内容会显示出来（但不会立即显示），当我在图像上时，内容开始隐藏和显示。当我离开图像时，我的内容仍然隐藏

这是我的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;
}
.opciones_imagen:hover {
    display: block;
}

---

使用css，而不是js。css必须如下所示：

。show_imagen1:hover，.optciones_imagen:hover

。您可以编辑您的答案以了解您的意思吗…我想我已经尝试了所有选项…（显然还有一个…）我已经尝试了，但它不起作用。我也尝试了粘贴在编辑的答案中的代码…但我没有任何结果。

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