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