悬停时背景图像更改
Posted
技术标签:
【中文标题】悬停时背景图像更改【英文标题】：Background Image change on Hover 【发布时间】：2020-07-24 20:54:29 【问题描述】：我正在创建一个 jquery 背景更改脚本。该脚本正在运行，但是当我添加一些淡入动画时，它变得有点错误。当您将鼠标悬停在文本上 2-3 次时，它会在几秒钟内不显示任何内容。 我试过这段代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BG CHNAGE</title>
</head>
<body style="background-color: #1f1f1f; height: 100vh !important; padding-top: 0;">
<div class="box" style="height: 100vh !important; background-repeat: no-repeat; background-size: cover;">
<div class="row">
<div class="col-sm-12 col-md-6 p-5">
<div class="content">
<a href="#" target="_blank">
<h3 class="content-title button" >800ezer</h3>
</a>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function()
$(".button").mouseover(function()
var imageUrl = "https://images.freeimages.com/images/small-previews/bd7/falloxbow-1058032.jpg";
$(".box").hide().css("background-image", "url(" + imageUrl + ")").fadeIn(800);
);
$(".button").mouseout(function()
var imageUrl = "";
$(".box").hide().css("background-image", "url(" + + ")").fadeIn(800);
);
);
</script>
</body>
</html>
【问题讨论】：
【参考方案1】：请试试这个：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BG CHNAGE</title>
</head>
<body style="background-color: #1f1f1f; height: 100vh !important; padding-top: 0;">
<div class="content">
<a href="#" target="_blank">
<h3 class="content-title button" >800ezer</h3>
</a>
</div>
<div class="box" >
<div class="row">
<div class="col-sm-12 col-md-6 p-5">
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function()
$(".button").mouseover(function()
$(".box").addClass('bg');
);
$(".button").mouseout(function()
$(".box").removeClass( 'bg');
);
);
</script>
<style>
.box
-webkit-transition: ease all 0.9s;
-moz-transition: ease all 0.9s;
-ms-transition: ease all 0.9s;
transition: ease all 0.9s;
background-repeat: no-repeat;
background-size: cover;
height: 100vh !important;
opacity: 0;
.box.bg
background-image: url(https://images.freeimages.com/images/small-previews/bd7/falloxbow-1058032.jpg);
-webkit-transition: ease all 0.9s;
-moz-transition: ease all 0.9s;
-ms-transition: ease all 0.9s;
transition: ease all 0.9s;
opacity: 1;
</style>
</body>
</html>
【讨论】：
#eli 太感谢了，我根据要求改了一点。再次感谢。以上是关于悬停时背景图像更改的主要内容，如果未能解决你的问题，请参考以下文章