根据悬停的按钮更改滑动过渡的背景？答案

【问题标题】：Change background with sliding transition depending on button hovered?根据悬停的按钮更改滑动过渡的背景？
【发布时间】：2022-12-05 00:14:01
【问题描述】：

我最近一直在尝试重新设计我的网站，我认为根据您悬停的按钮更改主标题以更改为不同背景的想法会很酷

但是，除了绝对基础之外，我对 javascript 一无所知，所以一些帮助会很好

这就是我想要实现的目标

这是标头的当前 HTML

<body>
<div class="logocontainer">
 <a href="index.html">
 <img src="images/badasslogo.png" class="logo"></a>
 </div>

<div id="buttoncontainer" class="buttoncontainer">
</div>

<script src="js/menu.js"></script>

这是 CSS

.logocontainer {
    text-align: center;
   }

.logo {
    display: inline-block;
    margin-bottom: 0.30%;
    align: center;
   }

.buttoncontainer {
    text-align: center;
   }

.button {
    display: inline-block;
   }

.button:hover {
    box-shadow: 0 0 5px white;
    filter: brightness(125%);
   }
    
.button:active {
    box-shadow: 0 0 10px white;
    filter: brightness(155%);
   }

还有我用于按钮的 .js 文件，因为如果我不使用它，如果我想向它添加更多按钮，我将不得不手动更新每个页面

let headerContent = `
  <a href="index.html">
    <img src="images/buttons/homebutton.png" class="button"></a>

  <a href="blog/blogmain.html">
    <img src="images/buttons/blogbutton.png" class="button"></a>

  <a href="art/artmain.html">
    <img src="images/buttons/artbutton.png" class="button"></a>

  <a href="fanart/fanartmain.html">
    <img src="images/buttons/fanartbutton.png" class="button"></a>

  <a href="partners/partnersmain.html">
    <img src="images/buttons/partnersbutton.png" class="button"></a>
    
  <a href="guestbook/guestbook.html">
    <img src="images/buttons/guestbookbutton.png" class="button"></a>

  <a href="https://junessaidotnet.proboards.com/">
    <img src="images/buttons/forumsbutton.png" class="button"></a>
    
  <a href="downloads/downloadsmain.html">
    <img src="images/buttons/downloadsbutton.png" class="button"></a>
    
  <a href="extras/extrasmain.html">
    <img src="images/buttons/extrasbutton.png" class="button"></a>

  <a href="donate/donatemain.html">
    <img src="images/buttons/donatebutton.png" class="button"></a>
  
  <a href="about/about.html">
    <img src="images/buttons/aboutbutton.png" class="button"></a>
`;
document.querySelector('#buttoncontainer').insertAdjacentHTML('beforeend', headerContent);

另外，如果可能的话有没有办法将徽标也插入 .js 文件？

【问题讨论】：

标签： javascript html css

【解决方案1】：

JS 解决方案可能涉及为 mouseenter 和 mouseleave 设置事件侦听器，并基于此在某些元素上切换类，但既然你说你不擅长 JS，那么这里有一个纯 CSS 的方法，你可以改用它。

.logocontainer {
  width: 100%;
  height: 200px;
  background-color: black;
}

:has(button:first-child:hover) .logocontainer {
  background-color: red;
}

:has(button:nth-child(2):hover) .logocontainer {
  background-color: gold;
}

<div class="logocontainer"></div>

<div id="buttoncontainer" class="buttoncontainer">
  <button>button 1</button>
  <button>button2</button>
</div>

【讨论】：

【解决方案2】：

请查看 JavaScript cmets。我包含了一个简单的转换，但使用 JS 更改 img 受带宽限制。最好的方法是最初加载所有图像position: absolute;，一个堆叠在另一个之上，然后根据索引更改z-index。

// Here you set the img src of banners. Be sure to have as many as the menu buttons
const banners = [
  'https://via.placeholder.com/550x100',
  'https://via.placeholder.com/551x100',
  'https://via.placeholder.com/552x100',
  'https://via.placeholder.com/553x100',
  'https://via.placeholder.com/554x100',
  'https://via.placeholder.com/555x100',
  'https://via.placeholder.com/556x100',
  'https://via.placeholder.com/557x100',
  'https://via.placeholder.com/558x100',
  'https://via.placeholder.com/559x100',
  'https://via.placeholder.com/560x100',
  'https://via.placeholder.com/561x100',
];

let headerContent = `
  <a href="index.html">
    <img src="https://via.placeholder.com/50x50" class="button"></a>
  <a href="blog/blogmain.html">
    <img src="https://via.placeholder.com/50x50" class="button"></a>
  <a href="art/artmain.html">
    <img src="https://via.placeholder.com/50x50" class="button"></a>
  <a href="fanart/fanartmain.html">
    <img src="https://via.placeholder.com/50x50" class="button"></a>
  <a href="partners/partnersmain.html">
    <img src="https://via.placeholder.com/50x50" class="button"></a>
  <a href="guestbook/guestbook.html">
    <img src="https://via.placeholder.com/50x50" class="button"></a>
  <a href="https://junessaidotnet.proboards.com/">
    <img src="https://via.placeholder.com/50x50" class="button"></a>
  <a href="downloads/downloadsmain.html">
    <img src="https://via.placeholder.com/50x50" class="button"></a>
  <a href="extras/extrasmain.html">
    <img src="https://via.placeholder.com/50x50" class="button"></a>
  <a href="donate/donatemain.html">
    <img src="https://via.placeholder.com/50x50" class="button"></a>
  <a href="about/about.html">
    <img src="https://via.placeholder.com/50x50" class="button"></a>
`;
document.querySelector('#buttoncontainer').insertAdjacentHTML('beforeend', headerContent);

// Grab menu buttons and overlay span
const menuButtons = document.querySelectorAll('#buttoncontainer a');
const overlay = document.querySelector('.overlay');

// For each menu button, attach an EventListener
menuButtons.forEach((btn, i) => {
  btn.addEventListener('mouseenter', () => {
    // remove animate class from overlay-span making it go back to left position
    overlay.classList.remove('animate');

    // create a new img element
    const img = document.createElement("img");
    // set the img src to the matching index of your array list
    img.src = banners[i];
    // set class of 'logo'
    img.classList.add('logo');

    // remove current img element and append the new img element after 900ms
    setTimeout(() => {
      document.querySelector('.logocontainer a img').remove();
      document.querySelector('.logocontainer a').append(img)
    }, 900);
    // with a delay of 300ms, re-add the animate class to overlay. That way you re-initialize the swipe
    // CSS animation. The animation is set to last 1.5s or 1500ms, and the overlay is wider than the
    // img with width 150%. So, it takes 300ms to start animation and 1500ms to finish the animation.
    // This is why we set the previous Timeout with 900ms, because we want to let the overlay
    // cover most of the width, then trigger the change of image, and have it set the new image
    // while the overlay has not uncover the layer beneath it. This way, it seems that the transition
    // is smooth. However, I would load all banners stacked one upon the other and change the z-index
    // of each one depending on the index of button hovered.
    setTimeout(() => overlay.classList.add('animate'), 300);
  });
});

.logocontainer {
  text-align: center;
}

.logocontainer a {
  max-width: 550px;
  height: 100px;
  margin: 0 auto;
  display: flex;
  position: relative;
  overflow: hidden;
}

.logo {
  position: absolute;
  left: 0;
  top: 0;
  margin-bottom: 0.30%;
  object-fit: cover;
  z-index: 0;
}

.buttoncontainer {
  text-align: center;
}

.button {
  display: inline-block;
}

.button:hover {
  box-shadow: 0 0 5px white;
  filter: brightness(125%);
}

.button:active {
  box-shadow: 0 0 10px white;
}

.overlay {
  position: absolute;
  left: -150%;
  top: 0;
  height: 100%;
  width: 150%;
  background: #151515;
  z-index: 2;
}

.animate {
  animation: 1.5s swipe forwards ease;
}

@keyframes swipe {
  0% {
    left: -150%;
  }
  100% {
    left: 150%;
  }
}

<div class="logocontainer">
  <a href="index.html">
    <span class="overlay"></span>
    <img src="https://via.placeholder.com/550x100" class="logo" />
  </a>
</div>

<div id="buttoncontainer" class="buttoncontainer">
</div>

【讨论】：

您应该找到更好的预加载逻辑。将某些东西作为揭示者滑动然后异步请求新图像是没有意义的 - 结果得到内容闪现.
@RokoC.Buljan 是的，这就是为什么我建议加载所有 <img> 最初定位的绝对位置，并根据悬停按钮更改每个 <img> 的 z-index。这样你就不会有异步方面把事情搞砸了。