html - 当我点击图像时，我在它上面放了一个滤镜，它也会影响图像的边框，我怎样才能使边框抵抗它？

Question

代码如下:

.championlock:active {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

.championlock:hover {
    border: 5px solid #93d3fe;
    border-radius: 5px;
}

.championlock {
    border: none;
    overflow: hidden;
    -webkit-transition-duration: 0.05s;
    -moz-transition-duration: 0.05s;
    -o-transition-duration: 0.05s;
    -ms-transition-duration: 0.05s;
    transition-duration: 0.05s;
}

<a href="trundlesupportguide.html" target="_blank"><img class="championlock" src="http://www.counter-lol.de/Trundle.png" alt="Trundle Icon" width="100%" style="max-width:62px;"></a>

我想让边框保持蓝色，我该怎么做？

http://jsfiddle.net/ow4pgyzk/

Answer 1

只需将边框设置到 a 标签(父标签)即可。

a {
  display:inline-block;
}

a:hover {
  border: 5px solid #93d3fe;
	border-radius: 5px;
}

a img {
  display:block;
}

.championlock:active {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

.championlock{
  border: none; 
  -webkit-transition-duration: 0.05s;
  -moz-transition-duration: 0.05s;
  -o-transition-duration: 0.05s;
  -ms-transition-duration: 0.05s;
  transition-duration: 0.05s;
}

<a href="trundlesupportguide.html" target="_blank">
  <img class="championlock" src="http://www.counter-lol.de/Trundle.png" alt="Trundle Icon" width="100%" style="max-width:62px;">
</a>