Question

当我将鼠标悬停在它上面时，我想让背景图像更暗。目前它将使一切都变暗，包括文本。

这是html

<div class="col-md-6 cities">
    <div class="card card-background cities" fadebg="true" data-image="https://test.jpg">
        <div class="card-body">
            <h3 class="card-title">TEST</h3>
            <p class="card-description">
                TEST
            </p>
        </div>
    </div>                        
</div>

这是jquery：

$('.cities').find('.card.card-background.cities').hover(function () {
    //$(this).find("[fade=bg]").fadeTo(500, 0.5);
    $(this).find('.card-title').css("display", "block");
    $(this).find('.card-description').css("display", "block");
},
function () {
        //$(this).find("[fade=bg]").fadeOut(500);
        $(this).find('.card-title').css("display", "none");
        $(this).find('.card-description').css("display", "none");
    }
);

数据图像正在渲染为背景图像

setTimeout(function () {
    $(document).ready(function () {
        $('div[data-image]').each(function () {
            $(this).css("background-image", "url('" + 
    $(this).attr('data-image') + "')");
        });
    });
}, 1000);

Answer 1

不要使用Jqueries，你可以使用css。将此类添加到div中，在下面的css中更改图像路径并将代码粘贴到<style></style>或添加到自定义CSS中

.last-phone
    {
        background-image:linear-gradient( rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6) ),url('./images/your_image.jpg');    
}
.last-phone:hover
{
    background-image:linear-gradient( rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.9) ),url('./images/your_image.jpg');
}

使背景图像在悬停时变暗

1 个答案: