将鼠标悬停事件添加到砌体答案

【问题标题】：adding mouseover event to masonry将鼠标悬停事件添加到砌体
【发布时间】：2013-03-22 13:27:32
【问题描述】：

这可能是一个简单的答案，但我很难找到它。

我正在使用 masonry 插件来使用图像填充页面。图像是艺术品。当您将鼠标悬停在他/她的作品图像上时，我希望艺术家的名字从底部向上滑动。

现在我只是想让鼠标悬停事件起作用，但什么也没发生。有人可以帮忙吗？

$(document).ready(function(){


$.get("artists.json", function(data){

    json = $.parseJSON(data);

    $.each(json, function(i, data){

            $("#container").append("<div class='thumbnail small' id='" + data.id + "' index='"+i+"' style=\"background:url('" + data.imageofWork + "') no-repeat center center; background-size:cover; \" caption = '"+data.artistName+"' ></div>");



    });

});

$("#container").imagesLoaded( function(){
    setTimeout(function()
    {
        $('#container').masonry({
            itemSelector : '.thumbnail',
            gutterWidth: 0,
            isAnimated: true
        });

        $("#container").css('visibility','visible').hide().fadeIn('slow', function(){setTimeout(function(){ checkURL();},500)});

    },1200)



});


$(document).on("mouseover", ".thumbnail.small", function(){

        //console.log($(this));
        $(this).css('width:', '110%');
});

【问题讨论】：

我不熟悉 div 的 'caption' 属性，这是 masonry.js 插件特有的吗？

标签： jquery css mouseover jquery-masonry

【解决方案1】：

你可以用 css 做到这一点...

http://jsfiddle.net/3Rkdp/1/

你的 jquery（来自你的回答）

$("#container").append("<div class='thumbnail small' id='" + data.id + "' index='"+i+"' style=\"background:url('" + data.imageofWork + "') no-repeat center center; background-size:cover; \" ><div id='artistname' style='display: block; visibility: hidden;z-index:1000; font-size: 115%; font-weight: bold; padding: 10px; background-color: #000000; color: #ffffff; opacity: .5;'>"+data.artistName+"</div></div>");

css

.thumbnail { height: 200px; width:300px; overflow:hidden; position: relative; }
.thumbnail:hover .artistname { bottom: 0; }
.artistname { padding: 10px; width:100%; background-color: #000000; color: #ffffff; opacity: .5; position:absolute; bottom :-100px;  -webkit-transition:all .2s ease-in-out; -moz-transition:all .2s ease-in-out; -o-transition:all .2s ease-in-out; -ms-transition:all .2s ease-in-out; }

我正在使用 css 过渡来使过渡看起来很漂亮，这不适用于 ie 9 及更低版本，但它会优雅地降级。

【讨论】：

【解决方案2】：

虽然“mouseover”应该可以工作，但在元素上使用“mouseenter”和“mouseleave”的组合可能是有利的。这也将允许您微调输入/输出转换的视觉效果。

试试：

$("body").on("mouseenter mouseleave", ".thumbnail.small", function(e){
    if(e.type == "mouseenter"){
        //some hover state
    }else if(e.type == "mouseleave"){
        //remove your hover state
    }
});

祝你好运！

【讨论】：

【解决方案3】：

我需要在包含砖石的 div 中嵌套和设置我想在鼠标悬停时出现的 div（在本例中为“thumbnail small”）：

$("#container").append("<div class='thumbnail small' id='" + data.id + "' index='"+i+"' style=\"background:url('" + data.imageofWork + "') no-repeat center center; background-size:cover; \" ><div id='artistname' style='display: block; visibility: hidden;z-index:1000; font-size: 115%; font-weight: bold; padding: 10px; background-color: #000000; color: #ffffff; opacity: .5;'>"+data.artistName+"</div></div>");

【讨论】：