javascript - 获取一组背景图像以供稍后保存，然后在它们和背景颜色之间悬停切换

Question

这是我的问题:

我创建了一个如下所示的 block :

<div class="col-md-4">
    <a href="/our-difference/our-story/"><p></p>
        <div class="img-link" style="background-image: url(/wp-content/uploads/2016/07/our_story_600x400-1.jpg)">
            <div class="text">
                <h2>Our Story</h2>
                <h3>For over 25 years we have specialized in and excelled at health care and human services education.</h3>
            </div>
        </div>
    </a>
</div>

CSS:

.img-link {
    position: relative;
    width: 100%;
    height: 200px;
    background-size: cover;
    &:hover {
       opacity: .9;
   }
   .text {
       position: absolute;
       top: 10px;
   }

}

我的问题是我必须以友好的方式设置 HTML，因为它是 WordPress，所以我必须内联添加背景图像。

我的目标是:

当用户将鼠标悬停在背景图像所在的 div 上时，颜色将更改为具有不透明度的实际颜色，并且文本不会受到影响(就像使用不透明度属性时应该发生的那样)。

但是如果我使用 mouseOut 和 mouseOver，例如:

$('.img-link')
.mouseover(function(){
    $(this).css('background', 'green');
})
.mouseout(function(){
    $(this).css('background', 'initial');
});

当用户离开图片时，背景会回到初始图片，此时为空。

之前:

background-image: url(/wp-content/uploads/2016/07/our_story_600x400-1.jpg);

之后

background-color: #9b7878a8.

在最后一步，背景将是空的。

我的问题是:有没有办法“保存”背景图像(比如在数组中)，然后使用数组的值重新应用原始背景图像？

类似于:

let arrayimage = $('.img-link');

$('.img-link')
.mouseover(function(){
    $(this).css('background', 'green');
})
.mouseout(function(){
    $(this).css('background', arrayimage);
})

这只是一个例子，代码还差得远，我是新手。

Answer 1

鉴于您使用的是 jQuery，这实际上非常简单，并且假设您只有一个背景图像要存储，则根本不需要数组。

$(document).ready(function(){
    var imgBackground = $('.img-link').css('background-image');
    $('.img-link').mouseover(function(){
        $(this).css('background', 'green');
    }).mouseout(function(){
        $(this).css('background', imgBackground);
    });
});

在这里，从 $(document).ready() 开始确保在执行任何其他操作之前加载内联图像。然后，我们可以使用 jQuery 的 .css() 函数将您加载的图像安全地存储在一个变量中，告诉它检索背景图像。在鼠标移开时，您需要做的就是将该变量重新分配为图像。

如果您需要删除图片链接周围的 url(...)，您可以在此处查看包含该信息的另一个类似答案:Can I get div's background-image url?