javascript悬停css改变颜色

时间:2013-07-29 09:21:16

标签: javascript css wordpress

如何在我网站上的半透明白色背景中更改项目缩略图:

http://www.lauradawaf.co.uk/

这样的半透明黑色背景:

http://madebysix.com/

notso.animations.js

$(".project_thumb").each(function() {  // INDEX: fade thumb boxes in sequentially
    $(this).delay(db).fadeIn(500);
    db += 150;  
});

$(".project_thumb img.project_thumb_img_hover").css({'opacity': '0.3'}); // INDEX: force opacity on project_thumb_img_hover  
$(".project .meta, .project_text").delay(500).fadeIn(800); // SINGLE: fade project text in 

$(function(){  // INDEX: thumbnail hover & delay 
    var config = {    
         sensitivity: 7, // minumum mouse movement before doOver is called    
         interval: 75,  // delay before doOver    
         over: doOver,   // onMouseOver function    '
         timeout: 300,   // delay before doOut
         out: doOut    // onMouseOut function      
    };
    function doOver() {
         $(this).find("img.project_thumb_img").fadeTo(250, 0);
         $(this).find("img.project_thumb_img_hover").fadeIn(250);
         $(this).find(".meta").delay(150).fadeTo(250, 1);
    }
    function doOut() {
         $(this).find(".meta").fadeTo(250, 0);
         $(this).find("img.project_thumb_img").delay(150).fadeTo(250, 1);
         $(this).find("img.project_thumb_img_hover").delay(150).fadeOut(250);
    }
    $(".project_thumb").hoverIntent(config);
});

$('#project_thumbnails') // INDEX: masonry layout
    .isotope({
        masonry: {
            columnWidth: 6
        },
        animationEngine: 'jquery',
        animationOptions: {
            easing: 'easeOutQuint',
            queue: false,
            duration: 1000
        }
    });
}); // close doc.ready

1 个答案:

答案 0 :(得分:1)

请在

行后添加CSS文件

.project_thumb_large,.project_thumb_small {background:#333;}