向砌體添加鼠標懸停事件

這可能是一個簡單的答案，但我很難找到它。向砌體添加鼠標懸停事件

我使用砌體插件來填充圖像的頁面。這些圖像是藝術作品。當你將鼠標放在他/她的作品上時，我希望藝術家的名字從底部向上滑動。

現在我只是想讓一個mouseover事件工作，但沒有發生。任何人都可以幫忙嗎？

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

來源

2013-03-22 LauraNMS

我不熟悉div的'caption'屬性，這是masonry.js插件特有的東西嗎？ – superUntitled 2013-03-22 18:04:34

儘管「鼠標懸停」應該起作用，但在元素上使用「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 
    } 
});

祝你好運！

來源

2013-03-22 15:13:51 chrisgonzalez

我需要築巢和風格我想上包含磚石DIV中鼠標懸停在div（在這種情況下，「縮略圖小」）：

$("#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>");

來源

2013-03-22 17:57:59 LauraNMS

您可以用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和更低的工作，但它緩慢下降。

來源

2013-03-22 18:14:00 superUntitled

向砌體添加鼠標懸停事件

回答

相關問題