CODEWITHSUNDEEP
jquery
Stefan Perju
Stefan Perju

Reputation: 298

Hide img onmouseenter and show div

I have and template in HTML like this: 

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

And I want when I hover over one image, to hide it and show the imageover div. So far I have this jQuery, but I don't understand what I am doing wrong:

$('#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 {}
});

Upvotes: 0

Views: 99

Answers (1)

Martin Tale
Martin Tale

Reputation: 907

You can do it easily using just CSS.

Here is an example in JSFiddle.

.imageover {
    display: none;
}

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

.photo:hover img {
    display: none;
}

Upvotes: 5

Related Questions