Question

我有这样的HTML模板：

<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 div。到目前为止，我有这个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;
}

隐藏img onmouseenter并显示div

1 个答案: