jquery - 隐藏 img onmouseenter 并显示 div

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>

我希望当我将鼠标悬停在一张图片上时，隐藏它并显示imageoverdiv。到目前为止，我有这个 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;
}