javascript - 如何模拟点击显示:none on hover image (how to listen for any mouse click in a browser)

Question

关于 a website (find it by the link)我有 images in footer (screenshot) 的链接

我在我想使用的页脚图标中发现了一个很好的故障效果。如果代码看起来像这样，它会随机更改图像:

<footer class="footer text-center">
       <a target="_blank" href="http://link1.com"><img src="f2.jpg"></a>
       <a href="http://link2.com"><img src="f3.jpg"></a>
       <a target="_blank" href="http://link3.com"><img src="f1.jpg"></a>
       <a target="_blank" href="http://link4.com"><img src="f5.jpg"></a>
        <a target="_blank" href="http://link5.com"><img src="bc.png"></a>
        <a href="mailto:http://link6.com@gmail.com"><img src="mail.jpg"></a>

 </footer>

简洁风格

.footer img:hover {
    display:none;
}

但在那种情况下，将鼠标悬停在图像页脚上时单击不会产生任何结果。

我试过使用 javascript:

var a_href
$("footer a").on("mousemove", function() {
  a_href = $(this).attr('href');
  console.log(a_href);

});

$(document).click(function(){
  console.log("!!!!!!!!!!!");
  console.log(a_href);
  window.open(a_href,'_blank');
});

想法是保存最后一个悬停的链接，然后通过单击任何其他元素来模拟对其的单击。但是只有当我点击其他任何地方而不是故障图标上的空格时，该方法才有效。与 $('body').click、$('.footer').click 相同。我试图用其他 div 覆盖页脚，我将在其上放置 .click 但 display:none 在 hover 上没有工作。

这是一个jsfiddle - http://jsfiddle.net/yssdjr17/1/

我该怎么办？谢谢。

UPD如果我们使用某些东西而不是 display:none，我们就会失去那种很酷的毛刺效果。我们喜欢元素随机折叠的方式，用户可能会点击其中一个元素，但不确定是哪个元素。对他来说是一种迷你游戏。

有没有办法在浏览器中监听鼠标点击，无论是在什么元素上？

Answer 1

不要使用display: none，而是使用visibility: hidden。这样元素仍会存在，只是不可见。

.footer img:hover {
    visibility: hidden;
}

JSFiddle demo .