0

私は次のような 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>

そして、1つの画像にカーソルを合わせたときに、それを非表示にして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 {}
});
4

1 に答える 1

5

CSSだけで簡単にできます。

JSFiddleの例を次に示します。

.imageover {
    display: none;
}

.photo:hover .imageover {
    display: block;
}

.photo:hover img {
    display: none;
}
于 2013-08-22T14:28:39.547 に答える