css 淡化产品图像上的文本

Posted 2021-05-13

// Fade Text on Product List Hover
jQuery("body.nextProductList div.tileContent").hover(function() {
    jQuery(this).children('body.nextProductList a.nextProdName').fadeToggle().css('display', 'block');
    jQuery(this).children('body.nextProductList div.tileContent div.nextStatus').fadeToggle();
});

/* Product List Product Styles */
body.nextProductList div.tileContent {
    position: relative;
}

body.nextProductList a.nextProdName {
    position: absolute;
    top: 10px;
    padding-left: 10px;
    display: none;
    font-family: 'amalia_pronormalitalic',sans-serif;
    text-transform: capitalize;
    font-size: 16px;
    letter-spacing: 1px;
}

body.nextProductList a.nextProdName:hover {
    text-decoration: none;
}

body.nextProductList div.tileContent div.nextStatus {
    position: absolute;
    top: 30px;
    padding-left: 10px;
    display: none;
    font-family: 'amalia_pronormalitalic',sans-serif;
    text-transform: capitalize;
    letter-spacing: 1px;
}