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;
}

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

1 个答案: