刷新时的随机背景 + 悬停时的背景变化

Question

我有一个页面，我希望在刷新时随机化容器的背景图像。 我还希望能够在悬停时更改背景图像，并使其恢复到当前的随机选择后悬停状态。 本质上，我想结合这两种效果：

https://codepen.io/sallymargaret/pen/mdMORLM和https://codepen.io/sallymargaret/pen/LYjbxdZ

因此，如果您登陆页面并且随机生成器选择了气球背景，则容器背景将在悬停状态完成后恢复为气球。

我试过将'url('+ heroPics[Math.floor(Math.random() * heroPics.length)] + ')插入onmouseleave （即，以$('#menu1').on('mouseleave', function(){ $('#header-image-wrapper').css('background-image', 'url('+ heroPics[Math.floor(Math.random() * heroPics.length)] + ')');});没有运气。

我是 JS 的超级新手，并且已经将所有这些代码从各种问题拼凑在一起，所以如果我对它大肆吹捧并且遗漏了一些关键和简单的东西，请提前道歉。

Answer 1

我删除了logo和menu1 ，因为你不使用它们。 您可以通过多次运行代码段来尝试随机。

 const heroPics = ['https://www.dontwasteyourmoney.com/wp-content/uploads/2020/08/best-balloons-900x400.jpeg', 'https://sqlundercover.files.wordpress.com/2021/03/dice.jpg', 'https://pbs.twimg.com/profile_images/653700295395016708/WjGTnKGQ.png']; const gif = "https://static.tumblr.com/foq3nys/2Wzr07uya/dan_typing.gif" // I remove menu1 and logo. We dont need that for our example const selected = heroPics[Math.floor(Math.random()*heroPics.length)]; $('#menu2').on('mouseenter', function() { $('#header-image-wrapper').css('background-image', `url(${gif})`); }); $('#menu2').on('mouseleave', function() { $('#header-image-wrapper').css('background-image', `url(${selected})`); }); // initialize the selected image $('#header-image-wrapper').css('background-image', `url(${selected})`);

 body { margin: 0; } .header-image-wrapper { height: 100vh; transition: background .3s linear; background: #f0d4eb no-repeat center; background-size: cover; } .open-project { color: #fff; font-weight: 700; font-size: 50px; margin: 0 auto; transition: all .2s ease-in-out; } .open-project:hover { opacity: .3; padding-left: 10px; } #header-image-wrapper { background-image: ; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="header-image-wrapper" id="header-image-wrapper"> <div class="open-project-link"> <a id="menu2" class="open-project" href="http://">link 1</a> </div> </div>