Trying to get invisible hyperlink - html

Question

My Code: https://jsfiddle.net/zL5b22bb/1/
Code 1. This is the original code showing the hyperlink border after you click on the image. It's clearly visible.
<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>
Code 2. After I remove the "img tag" the the hyperlink border is not visible. Which is what I want. But, by removing "img tag", the onmouseover background image gets disabled which is what I don't want.
<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>
Code 3. Now the hyperlink is invisible after you click on it, but the borders double up onmouuseover which messes it all up.
<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' "
/>
Everything is in the jsfiddle link.
I'm trying to get it to where you can have 2 color borders while keeping the hyperlink invisible with onmouseover working.
Is there a less complicated method than doing this? 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>