$("#photoAlbum").on("mouseenter", ".imagecontainer", function () {
$(this).find('.controlbar').show("slide", { direction: "down" }, 1000);
}).on("mouseleave", ".imagecontainer", function () {
$(this).find('.controlbar').hide("slide", { direction: "up" }, 1000);
});
.controlbar
is hidden by default
The .imagecontainer
div(s) is appended to #photoAlbum div after an ajax request hence why I am using .on()
and not just .hover(function() {}, function(){})
The HTML, drop-backdrop is absolutely positioned.
<div id="photoAlbum" class="tabcontent">
<div id="drop-backdrop">
<div class="text">Drag files here to upload</div>
</div>
<canvas id="drop-target"></canvas>
<div class="imagecontainer"><div class="controlbar" style="visibility: hidden; "><img src="/TreeView/images/delete.png" width="16px" height="16px"></div><img src="/Content/photoAlbums/9/3/539695_t.jpg"></div></div>
you should load jQuery UI library if you want your script to work
or use :
$("#photoAlbum").on("mouseenter", ".imagecontainer", function () {
$(this).find('.controlbar').slideDown(1000);
}).on("mouseleave", ".imagecontainer", function () {
$(this).find('.controlbar').slideUp(1000);
});
instead of style="visibility: hidden; "
use style="display:none; "
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.