Html 当我点击图像时，我在其上放置了一个过滤器，该过滤器也会影响图像的边界，我如何使边界抵抗该过滤器？

代码如下：

.championlock:激活{
-webkit过滤器：灰度（100%）；
滤镜：灰度（100%）；
}
.championlock:悬停{
边框：5px实心#93d3fe；
边界半径：5px；
}
championlock先生{
边界：无；
溢出：隐藏；
-webkit转换持续时间：0.05秒；
-moz转换持续时间：0.05s；
-o-过渡持续时间：0.05秒；
-ms转换持续时间：0.05s；
过渡时间：0.05秒；
}

---

只需将边框设置为

a

标记（父项）

a{
显示：内联块；
}
a:悬停{
边框：5px实心#93d3fe；
边界半径：5px；
}
img{
显示：块；
}
.championlock:活动{
-webkit过滤器：灰度（100%）；
滤镜：灰度（100%）；
}
championlock先生{
边界：无；
-webkit转换持续时间：0.05秒；
-moz转换持续时间：0.05s；
-o-过渡持续时间：0.05秒；
-ms转换持续时间：0.05s；
过渡时间：0.05秒；
}

---

谢谢，在我发布这篇文章后，我试图将边框改为a标签，但是a标签周围的边框对于img来说太小了，并且z索引更低。这就是为什么你需要添加

a

标签

显示：内联块
和
img
标签
display:block