我的代码：https://jsfiddle.net/zL5b22bb/1/
代码1.这是显示单击图像后超链接边框的原始代码。它清晰可见。
<a href="http://5645646/" target="_blank">
<img style="display:inline-block;background-color:#000000; width: 100px; height: 100px; cursor: pointer;border: 5px solid #0F16FD;"
onmouseover="this.src='http://i.imgur.com/ra4471G.png';
this.style.color='white'
this.style.border='5px solid #66A4F2'"
onmouseout="this.src='http://i.imgur.com/awwMlPD.png';
this.style.color='white'
this.style.border='5px solid #0F16FD' "
/></a>
代码2.删除“img标签”后，超链接边框不可见。这就是我想要的。但是，通过删除“img tag”，onmouseover背景图像被禁用，这是我不想要的。
<a href="http://5645646/" target="_blank" style="display:inline-block;background-color:#000000; width: 100px; height: 100px; cursor: pointer;border: 5px solid #0F16FD;"
onmouseover="this.src='http://i.imgur.com/ra4471G.png';
this.style.color='white'
this.style.border='5px solid #66A4F2'"
onmouseout="this.src='http://i.imgur.com/awwMlPD.png';
this.style.color='white'
this.style.border='5px solid #0F16FD' "
/></a>
代码3.现在，点击它后，超链接是不可见的，但边框会在使用过程中加倍，这会使它全部混乱。
<a href="http://5645646/" target="_blank" style="display:inline-block;background-color:#000000;color:white; width: 100px; height: 100px; cursor: pointer;border: 5px solid #0F16FD;">
<img src="http://i.imgur.com/awwMlPD.png" width="100px" height="100px"
onmouseover="this.src='http://i.imgur.com/ra4471G.png';
this.style.border='5px solid #66A4F2'"
onmouseout="this.src='http://i.imgur.com/awwMlPD.png';
this.style.border='5px solid #0F16FD' "
/>
一切都在jsfiddle链接中。
我正试图将它带到2个颜色边框的位置，同时保持超链接在onmouseover工作时不可见。
有没有比这样做更简单的方法？ https://jsfiddle.net/fcdy4ocw/4/
<a id="test" href="http://5645646/" target="_blank" style="color:white; display:inline-block;background:#000000 url(http://i.imgur.com/awwMlPD.png);width:100px;height:100px;cursor:pointer;border:5px solid #0F16FD;" onmouseover="this.style.border='5px solid #66A4F2';
this.style.background='#000000 url(http://i.imgur.com/ra4471G.png)';" onmouseout="this.style.border='5px solid #0F16FD';
this.style.background='#000000 url(http://i.imgur.com/awwMlPD.png)';"></a>