CSS 网格悬停动画答案

【问题标题】：CSS grid hover animationCSS 网格悬停动画
【发布时间】：2022-09-23 10:48:19
【问题描述】：

想知道如何有人建议将此示例重建为更可行的版本，可以用作网络上的交互式部分。

HTML

<div class=\"wrapper\">
  <div class=\"box a\"></div>
  <div class=\"box b\"></div>
  <div class=\"box c\"></div>
  <div class=\"box d\"></div>
  <div class=\"box e\"></div>
  <div class=\"box f\"></div>
  <div class=\"box a\"></div>
  <div class=\"box b\"></div>
  <div class=\"box c\"></div>
  <div class=\"box d\"></div>
  <div class=\"box e\"></div>
  <div class=\"box f\"></div>
</div>

CSS

.wrapper {
  overflow: hidden;
  width: 100vw;
  display: grid;
  grid-template-columns: 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px;
  grid-gap: 0px;
  background-color: #fff;
  color: #444;
}

.box {
  background-color: #fff;
  color: #fff;
  border: 0.001em solid #efefef;
  border-radius: 0px;
  padding: 0px;
  height:1 7px;
  transition: all 1s ease-out;
  transition-delay: 0.2s;
}

.box:hover {
  background-color: #FF5400;
  border: 0.001em solid #FF5400;
  transition: all 0.1s ease-out;
}

.box.d:hover {
  background-color: #2BD1F8 !important;
  border: 0.001em solid #2BD1F8;
  transition: all 0.1s ease-out;
}

“更可行”是指无需显式创建所有这些 div 吗？
出于礼貌，我将链接的演示带入了问题中，（相关的）\"minimal reproducible example\" 代码是必需的，以便回答者可以更轻松地查看、访问和使用该代码。将来，请尝试自己执行此操作，因为缺少代码是关闭问题的原因。另外，请查看关于\"的指导方针How to Ask\" 这应该进一步解释我们对Stack Overflow 问题的要求和期望。谢谢，欢迎。
谢谢！这是我第一次使用这个平台。是的，在更精致和更少的代码中更可行。同样响应迅速，我觉得有一种更好的方法可以同时解决这两个问题......@AHaworth

标签： javascript css

【解决方案1】：

你可以这样做，运行一个for循环来生成你想要的div，我在codepen上看到，每个nth元素都会改变颜色，所以我认为这比codepen上的解决方案更可行。

let row = document.querySelector('.row');

for(let i = 0; i <= 50; i++){
   
    if(i % 5 === 0){
        row.innerHTML += `
            <div class="box-blue"></div>
        `
    }else{
        row.innerHTML += `
        <div class="box-orange"></div>
    `
    }
}

.box-orange{
    width: 50px;
    height: 50px;
    margin: 1rem;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
}
.box-orange:hover{
    background: orange;
}
.box-blue{
    width: 50px;
    height: 50px;
    margin: 1rem;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;

}
.box-blue:hover{
    
    background: blue;
}

<div class="container">
        <div class="row">
            
        </div>
   </div>

【讨论】：

我使用了 Bootstrap，所以如果你将 Bootstrap CDN 添加到你的工作区，你可以并排看到它们

【解决方案2】：

您可以做很多事情来简化代码，同时使其更通用。

这个 sn-p 删除了 CSS 上的供应商前缀以使事情更清晰，但如果您支持旧浏览器，当然可以将它们放回原处。

你想要的盒子数量在 JS 中设置。然后 sn-p 计算每行的数量并在包装器中设置 CSS 变量以将信息传递给样式。

它执行一个 for 循环来创建 div。

无需将类放入框中（除非您出于其他原因需要它们）。 CSS 可以使用 nth-child(6n-2) 处理每 6 个颜色为淡蓝色的颜色，其中第一个颜色为 4。

通过将框的宽度设置为变量，可以轻松构建更通用的内容，您可以将数字四舍五入以准确填充一行等。

const numBoxes = 300;// set this to the number of boxes you want

const wrapper = document.createElement('div');
wrapper.classList.add('wrapper');
wrapper.style.setProperty('--numBoxes', numBoxes);
wrapper.style.setProperty('--numInRow', Math.floor(window.innerWidth / 20));
for (let i=0; i<numBoxes; i++) {
  const box = document.createElement('div');
  box.classList.add('box');
  wrapper.appendChild(box);
}
document.body.appendChild(wrapper);

.wrapper {
  overflow:hidden;
  width:100vw;
  display: grid;
  grid-template-columns: repeat(var(--numInRow), 20px);
  grid-gap: 0px;
  background-color: #fff;
  color: #444;
}

.box {
  background-color: #FFF;
  color: #fff;
  border: 0.001em solid #efefef;
  height:17px;
  transition: all 1s ease-out;
  transition-delay:0.2s;
}

.box:hover {
  background-color: #FF5400;
  border: 0.001em solid #FF5400;
   transition: all 0.1s ease-out;
}

.box:nth-child(6n-2):hover {
  background-color:  #2BD1F8;
   border: 0.001em solid #2BD1F8;
}

如果视口改变大小，则必须设置用于设置变量和删除/创建框的代码以重新运行。

【讨论】：

是的，这更整洁，我想知道您如何设置框的数量以始终填充页面的宽度？！（棘手）