Question

我已经使用类名“.pics”动态创建了一些div，如下所示

$(MyJson).each(function (obj) {
            $("#GalleryPics").append("<div class='pics'><a href='#' class='delete'>some</a><a href='" + MyJson[obj].ImageURL + "' rel='lightbox-journey' class='delete'><img src='" + MyJson[obj].ImageURL + "' width='150' height='150' /></a></div>");
        });

使用上面的代码，我可以使用“.pics”类名在每个div中获取一些图像。现在我需要这样做，如果我想要删除任何图像，我应该显示一个删除按钮，其动作在图像悬停..“。delete”是我想在那里显示删除按钮的类..我怎么能实现它..

注意：

我已经尝试了一些CSS代码和.hover（function（）{但是，我无法实现它。请尽快帮助我..

提前致谢..

Answer 1

Jquery Hover

$(foo).mouseover(function(){
    //Do hover action
});

$(baz).mouseleave(function(){
    //Undo hover action
});

CSS悬停

foo:hover{
    //Do hover
}

的 JSFiddle

Answer 2

实际上有一个JQuery .hover()函数可以很好地完成确实使用CSS显示和隐藏使用转换。如果您愿意，可以轻松地将其更改为JQuery的show和hide函数，尽管IMO plain CSS为您提供了更大的灵活性。

var pics = $(".pics");
var deleteThis = $(".delete");
pics.hover(function () 
{
    deleteThis.addClass("show")
}, 
function () 
{
    deleteThis.removeClass("show")
})

然后在CSS中

.delete {
    position: absolute;
    height: 20px;
    top: -20px;
    left: 0px;
    right: 0px;
    color: white;
    transition: all .2s ease;
}

.delete.show {
    top: 0px;   
}

Here is a JSFiddle

如何在没有CSS的情况下使用jquery进行悬停？

2 个答案: