title: How to simulate click on a display:none on hover image (how to listen for any mouse click in a browser)
body: <p>On <a href="http://bassfunk.herokuapp.com/" rel="nofollow">a website (find it by the link)</a> I have links with <a href="https://www.dropbox.com/s/7isg66bsbhz4txg/%D0%A1%D0%BA%D1%80%D0%B8%D0%BD%D1%88%D0%BE%D1%82%202014-12-11%2015.30.43.png?dl=0" rel="nofollow">images in footer (screenshot)</a></p>
  
  <p>I have found a great glitch effect in a footer icons which I want to use. It chages images randomly if code looks like that:</p>
  
  <pre><code>&lt;footer class="footer text-center"&gt;
         &lt;a target="_blank" href="http://link1.com"&gt;&lt;img src="f2.jpg"&gt;&lt;/a&gt;
         &lt;a href="http://link2.com"&gt;&lt;img src="f3.jpg"&gt;&lt;/a&gt;
         &lt;a target="_blank" href="http://link3.com"&gt;&lt;img src="f1.jpg"&gt;&lt;/a&gt;
         &lt;a target="_blank" href="http://link4.com"&gt;&lt;img src="f5.jpg"&gt;&lt;/a&gt;
          &lt;a target="_blank" href="http://link5.com"&gt;&lt;img src="bc.png"&gt;&lt;/a&gt;
          &lt;a href="mailto:http://link6.com@gmail.com"&gt;&lt;img src="mail.jpg"&gt;&lt;/a&gt;
  
   &lt;/footer&gt;
  </code></pre>
  
  <p>and simple style</p>
  
  <pre><code>.footer img:hover {
      display:none;
  }
  </code></pre>
  
  <p>But in that scenario click while hovering on of the image footers gives no result. </p>
  
  <p>I've tried to use javascript:</p>
  
  <pre><code>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');
  });
  </code></pre>
  
  <p>Idea was to save the last hovered link and then emulate the click on it by clicking any other element. But that method works only if I click anywhere ELSE than a space over the glitchy icons. Same with <code>$('body').click</code>, <code>$('.footer').click</code>. 
  I've tried to overlay footer with other div on which i'd be putting <code>.click</code> but then <code>display:none</code> on <code>hover</code> doesn't work.</p>
  
  <p><strong>Here is a <a href="http://jsfiddle.net/yssdjr17/1/" rel="nofollow">jsfiddle - http://jsfiddle.net/yssdjr17/1/</a></strong> </p>
  
  <p>What should I do? Thank you.</p>
  
  <p><strong>UPD</strong>
  If we use something instead of a <code>display:none</code> we loose the cool glitch effect that way. We loved how randomly elements collapsed and that user might click on one of the elements, but never sure on which one. Some sort of a minigame for him.</p>
  
  <p><strong>Is there a way to listen for a mouseclick, in browser, no matter on what element?</strong></p>