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');
});

想法是保存最后一个悬停的链接，然后通过单击任何其他元素来模拟其上的点击。但是，只有当我点击ELSE的任何地方而不是毛刺图标上的空格时，该方法才有效。与$('body').click，$('.footer').click相同。我已经尝试将页脚与我.click放置的其他div叠加，但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

Answer 2

效果让它看起来很破碎。您无法从隐藏或未显示的任何内容中触发click事件。

而是尝试：

<div id="awesomelink" onclick="openawesomewindow('http://link1.com');"></div>

#awesomelink
{
 height:60px;
 width:60px;
 background-image:url('f1.jpg');
}
#awesomelink:hover
{
 background-image:url('awesomecrazyanimated.gif');
}

这就是我如何做到这一点，你将在不同的浏览器中获得更一致的结果。此外，一个元素不会缩短图标菜单，使精明的冲浪者不敢点击。

如何模拟显示屏上的点击：在悬停图像上无（如何在浏览器中监听任何鼠标点击）

2 个答案: