如何在Squarespace中用鼠标悬停在按钮上进行背景切换

我需要帮助处理squarespace网站中的一个功能。当鼠标悬停在首页三个菜单中的一个菜单上时，背景应该切换为与悬停的按钮相匹配。我在自己的测试环境中也做过类似的事情，但我还没有顺利地在后台工作之间转换。

我试图添加一个特定的类，该类包含一个超过默认图像的图像。然而，这种转变非常奇怪，并不是我想要的方式。我试着让它逐渐消失。关于如何做到这一点并将其注入方形空间，有什么想法吗？

这是我的js、css和html:

const btn1 = document.getElementsByClassName('btn1')[0];
const wrapper = document.getElementsByClassName('wrapper')[0];
const img2 = document.getElementsByClassName('img2')[0];
btn1.addEventListener('mouseenter', e => {
wrapper.classList.add('img2');
img2.style.opacity = '1';
console.log('log');
});
btn1.addEventListener('mouseleave', e => {
wrapper.classList.remove('img2');
console.log('log');
});

body{
box-sizing: border-box;
padding: 0;
margin: 0;
}
.l {
cursor: pointer;
width:10rem;
height: 5rem;
margin: auto;
display: flex;
align-items: center;
border: 3px solid black;
background-color: aqua;
}
.l p{
margin: auto;
}
.btn1{
background: green;
}
.wrapper{
background-size: cover;
width:100%;
height: 100vh;
-webkit-transition: background-image 1s ease-in-out;
transition: background-image 1s ease-in-out;
}
.default{
background-image: url('https://images.unsplash.com/photo-1547129607-cb70df5e9b4b?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1950&q=80');
}
.img2{
background-image: url('https://images.unsplash.com/photo-1520799163662-189c0284137b?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=961&q=80');
}
.img3{
background-image: url('https://images.unsplash.com/photo-1534043464124-3be32fe000c9?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1900&q=80');
}
.test2{
background: red;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper default">
<div class='l btn1'>
<p>
Header
</p>
</div>
<div class='l btn2'>
<p>
Header
</p>
</div>
<div class='l btn3'>
<p>
Header
</p>
</div>
</div>
<script src="app.js"></script>
</body>
</html>

这个问题还不完全清楚，但据我从翻译中了解，我可以提供以下解决方案：

const imgs = [
'https://images.unsplash.com/photo-1547129607-cb70df5e9b4b?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1950&q=80',
'https://images.unsplash.com/photo-1520799163662-189c0284137b?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=961&q=80',
'https://images.unsplash.com/photo-1534043464124-3be32fe000c9?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1900&q=80'
];
const wrapper = document.querySelector('.wrapper');
const btns = wrapper.querySelectorAll('.btn');
wrapper.addEventListener('mouseover', function(ev) {
if (!ev.target.classList.contains('btn') || ev.target.classList.contains('active')) { return false; };
btns.forEach((el, i) => {
el.classList.toggle('active', false);
if (el == ev.target) {
wrapper.style.backgroundImage = `url('${imgs[i]}')`;
ev.target.classList.toggle('active', true);
};
});
});

* {
box-sizing: border-box;
margin: 0; padding: 0;
}
.wrapper {
background-size: cover;
width: 100%; height: 100vh;
background-image: none;
transition: background-image .3s ease-out;
}
.btn {
display: flex;
justify-content: center;
align-items: center;
width: 10rem; height: 5rem;
border: 3px solid black;
margin: auto;
background-color: aqua;
cursor: pointer;
}
.btn p { pointer-events: none; }
.active { background: green; }

<div class="wrapper">
<div class='btn'>
<p>Header</p>
</div>
<div class='btn'>
<p>Header</p>
</div>
<div class='btn'>
<p>Header</p>
</div>
</div>

这个问题还不够清楚，但我想我知道你想要什么。

可以在要更改背景图像的每个元素中使用mouseover和mouseout(或(mouseleave属性。或者使用array对多个背景图像进行处理。以下是每种情况的示例：

一张图片：

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<img src="https://images.unsplash.com/photo-1448375240586-882707db888b?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxzZWFyY2h8MXx8Zm9yZXN0fGVufDB8fDB8&auto=format&fit=crop&w=600&q=60" id="img" onmouseover="change(true)" onmouseout="change()">
<script>function change(q=false)
{
if(q == true)
{
document.getElementById('img').src = 'https://images.unsplash.com/photo-1473448912268-2022ce9509d8?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1025&q=80';
}
else
{
document.getElementById('img').src = 'https://images.unsplash.com/photo-1448375240586-882707db888b?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxzZWFyY2h8MXx8Zm9yZXN0fGVufDB8fDB8&auto=format&fit=crop&w=600&q=60';
}
}</script>
</body>
</html>

多个图像(如自动滑块(：

<!DOCTYPE html>
<html>
<head>
<style>
#img{
transition: linear 2s;
width: 500px;
height: 500px;
}
</style>
<title>Page Title</title>
</head>
<body>
<img src="https://images.unsplash.com/photo-1448375240586-882707db888b?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxzZWFyY2h8MXx8Zm9yZXN0fGVufDB8fDB8&auto=format&fit=crop&w=600&q=60" id="img" onmouseover="t = setInterval(change, 3000);" onmouseout="change(true)">
<script>
var counter = 0;
var t;
function change(q = false)
{
if(q == true)
{
clearInterval(t);
}
else{
var imgs = ['https://images.unsplash.com/photo-1473448912268-2022ce9509d8?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1025&q=80', 'https://images.unsplash.com/photo-1519821172144-4f87d85de2a1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1231&q=80', 'https://images.unsplash.com/photo-1448375240586-882707db888b?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxzZWFyY2h8MXx8Zm9yZXN0fGVufDB8fDB8&auto=format&fit=crop&w=600&q=60'];

if(counter === 3)
{
counter = 0;
}
else{
document.getElementById('img').src = imgs[0 + counter];
counter++;
}
}
}
</script>
</body>
</html>

这样，当鼠标在图像上时，图像开始交替，当鼠标离开img时，滑块停止在当前图像中。

希望我能帮上忙！

相关内容

最新更新

热门标签：