即使加载了图像，也未定义图像

Question

在一个页面上，我有这样的转换，当你悬停在按钮上时，整个div的背景图像会发生变化。这在Chrome中效果很好，但当我悬停在按钮上方然后加载图像时，整个div会出现一瞬间的灰色闪烁。当我打开控制台时，它说图像没有定义，所以这可能与灰色闪烁有关。此外，当我在Firefox中尝试此代码时，并没有像在Chrome上那样平稳过渡。有什么想法如何修复它或如何重写代码使其工作吗？

$(function() {
$(".strip").mouseover(function() {
var curImg = $(this).attr("data-image");
$(".banner-img").css("background-image", "url(" + curImg + ")");
});
$(".strip").mouseout(function() {
$(".banner-img img").css("opacity", ".8");
$(".banner-img img").attr("src", image); // SET DEFAULT IMAGE WHEN MOUSE OUT
});
});

.banner {
width:100%;
height:100vh;
vertical-align:middle;
}

.banner-img {
position:absolute;
width:100%;
height:100vh;
background-color:#000;
transition:background-image .2s ease;
-webkit-transition: background-image .2s ease;
-moz-transition: background-image .2s ease;
-o-transition: background-image .2s ease;

background: url(http://via.placeholder.com/640x360
) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
box-shadow:inset 0 0 0 100vw rgba(0,0,0,0.3) ;
}

.banner-img img {
transition:background-image .2s ease;
}

.banner-strip {
display:flex;
align-items:center;
justify-content:space-around;
height:100vh;
flex-direction:row!important;
}

@media (max-width:554px) {
.banner-strip {
flex-direction:column!important;
}
}

.strip {
position:relative;
width:20%;
padding:0;
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
color:#fff;
}

.strip img {
display:block;
width:60px;
height:60px;
opacity:0;
transition:all .5s ease;
}

.strip:hover img {
opacity:1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="banner" data-aos="fade">
<div class="banner-img" style="height:100vh">
</div>
<div class="banner-strip">
<div class="strip" data-image="http://via.placeholder.com/1000x1000
">
<a href="tattoo-en.html ">
<button class="btn1 gold brk-btn">Tattoo</button>
</a>
<br>
<br>
<a href="tattoo.html">
<img src="https://via.placeholder.com/150
C/O https://placeholder.com/" alt="tattoo-icon" class="floating-icons" style="width: 65px; height:65px">
</a>
</div>
<div class="strip" data-image="http://via.placeholder.com/1100x1100
">
<a href="beauty-en.html">
<button class="btn1 gold mb-4  brk-btn">Beauty</button>
</a>
<a href="beauty.html">
<img src="https://via.placeholder.com/150
C/O https://placeholder.com/" alt="mascara-icon" class="floating-icons" style="width: 60px; height:60px">
</a>
</div>
<div class="strip" data-image="http://via.placeholder.com/1200x1200"
>
<a href="piercing-en.html">
<button class="btn1 gold mb-4  brk-btn">Piercing</button>
</a>
<a href="piercing.html">
<img src=https://via.placeholder.com/150
C/O https://placeholder.com/ alt="piercing-cion" class="floating-icons" style="width: 60px; height:60px">
</a>
</div>
</div>
</div>

Answer 1

将默认图像路径存储在'banner-img'的数据img属性中。悬停时基于stripdiv的"data-image">属性更新图像，鼠标悬停时从'data-img'特性返回默认图像。我已将图像名称更新为本地图像路径。

参考以下示例

$(function () {

$(".strip").mouseover(function () {
var curImg = $(this).attr("data-image");
$(".banner-img").css("background-image", "url(" + curImg + ")");
});
$(".strip").mouseout(function () {
var image = $(".banner-img").attr('data-img');
$(".banner-img").css("opacity", ".8");
$(".banner-img").css("background-image", "url(" + image + ")");
});
});

.banner {
width: 100%;
height: 100vh;
vertical-align: middle;
}
.banner-img {
position: absolute;
width: 100%;
height: 100vh;
background-color: #000;
transition: background-image .2s ease;
-webkit-transition: background-image .2s ease;
-moz-transition: background-image .2s ease;
-o-transition: background-image .2s ease;
background: url(http://via.placeholder.com/640x360) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
box-shadow: inset 0 0 0 100vw rgba(0, 0, 0, 0.3);
}

.banner-img img {
transition: background-image .2s ease;
}
.banner-strip {
display: flex;
align-items: center;
justify-content: space-around;
height: 100vh;
flex-direction: row !important;
}
@media (max-width:554px) {
.banner-strip {
flex-direction: column !important;
}
}
.strip {
position: relative;
width: 20%;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
color: #fff;
}
.strip img {
display: block;
width: 60px;
height: 60px;
opacity: 0;
transition: all .5s ease;
}
.strip:hover img {
opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="banner" data-aos="fade">
<div class="banner-img" data-img="http://via.placeholder.com/640x360" style="height:100vh">
</div>
<div class="banner-strip">
<div class="strip" data-image="http://via.placeholder.com/1000x1000">
<a href="tattoo-en.html ">
<button class="btn1 gold brk-btn">Tattoo</button>
</a>
<br>
<br>
<a href="tattoo.html">
<img src="images/Tattoo-machine-Icon-4.png" alt="tattoo-icon" class="floating-icons"
style="width: 65px; height:65px">
</a>
</div>
<div class="strip" data-image="http://via.placeholder.com/1100x1100">
<a href="beauty-en.html">
<button class="btn1 gold mb-4  brk-btn">Beauty</button>
</a>
<a href="beauty.html">
<img src="images/mascara.png" alt="mascara-icon" class="floating-icons"
style="width: 60px; height:60px">
</a>
</div>
<div class="strip" data-image="http://via.placeholder.com/1200x1200">
<a href="piercing-en.html">
<button class="btn1 gold mb-4  brk-btn">Piercing</button>
</a>
<a href="piercing.html">
<img src="images/piercing_icon2_white.png" alt="piercing-cion" class="floating-icons"
style="width: 60px; height:60px">
</a>
</div>
</div>
</div>