Javascript 在CSS和Vue中将非活动缩略图显示为灰色

当我点击缩略图时，我希望它以彩色显示，而其他缩略图显示为灰色。 因此，当你点击一个缩略图时，它是活动的，为了说明这一点，我希望缩略图是彩色的，而其他缩略图是灰色的，因为它们是不活动的

这就是我想要实现的目标：

Vue.component（'carousel'{
模板：`
{{currentImage.text}
`,
计算：{
currentImage（）{
返回this.images[this.activeImage]；
},
currentImage2（）{
返回this.images[this.activeImage]；
}
},
数据（）{
返回{
activeImage:0，
}
},
方法：{
激活图像（图像索引）{
this.activeImage=imageIndex；
},  
},
道具：[“图像”]
});
部分{
背景色：黑色；
}
.卡片传送带{
用户选择：无；
位置：相对位置；
}
.集装箱传送带{
垫面：5%；
}
.缩略图{
显示器：flex；
对正内容：空间均匀；
弯曲方向：行；
}
.缩略图{
显示：固定；
对齐项目：居中；
光标：指针；
填充：2px；
}
.缩略图>图像{
宽度：100%；
高度：自动；
过渡：所有250ms；
滤镜：灰度（100%）；
}
.缩略图：选中>img{
盒影：2px2px6px1pRGBA（0,0,0,0.5）；
可见性：隐藏；
过滤器：无；
}
.卡img{
位置：相对位置；
}
.卡img>img{
保证金：0自动；
垫顶：7%；
z指数：2；
}
.photoshop截图{
位置：绝对位置；
z指数：1；
宽度：70%；
右：-80px；
底部：-130px；
}
.containe转盘跨度{
颜色：白色；
字体大小：粗体；
箱形阴影：-0.3125em 0.3125em 0 rgba（0,0,0,0,0.15）；
}

var app=新的Vue({
el:“#应用程序”，
数据（）{
返回{
图像：[
{
文字：“Photoshop”，
id:'1'，
大：'/images/das-keyboard-x50q/photoshop profile.PNG'，
big2:“/images/das-keyboard-x50q/photoshop screenshot.png”，
拇指：'/images/das-keyboard-x50q/photoshop logo.jpg'
},
{
文本：“Aurocad”，
id:'2'，
大：'/images/das-keyboard-x50q/autocad profile.png'，
big2:“/images/das-keyboard-x50q/autocad screenshot.png”，
thumb:“/images/das-keyboard-x50q/autocad logo.png”
},
{
文字：“反打击”，
id:'3'，
大：'/images/das-keyboard-x50q/counterstrike profile.png'，
big2:“/images/das-keyboard-x50q/counterstrike screenshot.jpg”，
拇指：'/images/das-keyboard-x50q/counterstrike logo.png'
},
{
文字：“传奇联盟”，
id:'4'，
大：'/images/das-keyboard-x50q/leagueoflegends profile.png'，
big2:“/images/das-keyboard-x50q/leagueoflegends screenshot.png”，
拇指：'/images/das-keyboard-x50q/leagueoflegends logo.jpg'
}
],
}
}
});
我会将过滤器从
.thumbnails
旋转到
.thumbnailimage>img
，然后添加一个
过滤器：无至
。缩略图：活动>img

您的CSS应该如下所示：

.thumbnails {
  display: flex;
  justify-content: space-evenly;
  flex-direction: row;
  }

.thumbnail-image {
  display: fixed;
  align-items: center;
  cursor: pointer;
  padding: 2px;
  }

.thumbnail-image>img {
  width: 100%;
  height: auto;
  transition: all 250ms;
  filter: grayscale(100%);
  }

.thumbnail-image:active>img {
  box-shadow: 2px 2px 6px 1px rgba(0, 0, 0, 0.5);
  visibility: hidden;
  filter: none;
  }

问题是，当您将灰度过滤器添加到类
缩略图的容器中时，实际上是在覆盖内部设置的任何内容。如果你想影响缩略图像，你应该使其尽可能具体，这就是为什么
。缩略图像>img
是你的主要目标。此外，当您单击缩略图时，您需要撤消此更改，因此
。缩略图图像：活动>img
是您的覆盖。
我会将过滤器从
旋转到
。缩略图图像>img
，然后添加一个
过滤器：无至
。缩略图：活动>img

您的CSS应该如下所示：

.thumbnails {
  display: flex;
  justify-content: space-evenly;
  flex-direction: row;
  }

.thumbnail-image {
  display: fixed;
  align-items: center;
  cursor: pointer;
  padding: 2px;
  }

.thumbnail-image>img {
  width: 100%;
  height: auto;
  transition: all 250ms;
  filter: grayscale(100%);
  }

.thumbnail-image:active>img {
  box-shadow: 2px 2px 6px 1px rgba(0, 0, 0, 0.5);
  visibility: hidden;
  filter: none;
  }

问题是，当您将灰度过滤器添加到类
缩略图的容器中时，实际上是在覆盖内部设置的任何内容。如果你想影响缩略图像，你应该使其尽可能具体，这就是为什么
。缩略图像>img
是你的主要目标。此外，当您单击缩略图时，您需要撤消此更改，因此
。缩略图图像：active>img
是您的替代项。
以实现wis
.active{ 
   filter: sepia(100%) hue-rotate(19deg) saturate(98) brightness(98%) ; 
   border:3px solid #fff; 
 }