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

jQuery hover shows and hide my content

本文关键字：我的 隐藏 悬停 显示 jQuery      更新时间：2023-09-26

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

这是我的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;
}

但我没有任何回应。我做错了什么…：（

正如Demantic在评论中所说，使用CSS执行此任务：

.opciones_imagen {
    display: none;
}
.opciones_imagen:hover {
    display: block;
}
相关文章：