单击图像链接时显示边框

Question

我有一个页面，当一个图像被点击时，图像周围会显示一个边框，同时图像是一个链接，为什么会发生这种情况？它只是在点击图像时发生。 这是我的代码：

<div id="hammer">
      <a asp-action="myaction" asp-controller="mycontroller" class="col-xs-6"> <img src="~/images/online_keyboard_news.jpg" class="highlight" width="100%" height="auto" /> firstimage</a> 
        <a asp-action="myaction2" asp-controller="mycontroller2" class="col-xs-6"> <img src="~/images/document-428336_960_720.jpg" class="highlight" width="100%" height="auto" /> secondimage</a>
        </div>
        <br />

这是我正在使用的css类：

#hammer {
        font-size: 18pt;       
        margin: 15px 0 0 0;
        text-align: center;
    }

这就是单击图像时发生的情况：

Answer 1

为所有outline:none;和a元素添加img

#hammer a, #hammer a img{
  outline:none !important;
}

Answer 2

您可以尝试将outline css property设置为无：

#hammer a, #hammer img {
  outline: none;
}

现在让我来帮助你。

Answer 3

将此添加到您的css

#hammer > a {
   outline: 0;
}