CSS & jQuery - 点击图片，但注册悬停

Question

我的页面底部(或者实际上是窗口)有一个图像，它就像一座上升的建筑物。

但是，有时它会与页面和/或页脚内容重叠。这并不是什么大问题，因为我刚刚添加了 pointer-events: none;。

但我想，当将鼠标悬停在图像上时，它会淡出一点，以便您可以更明显地点击。但是因为 pointer-events: none; 它甚至没有注册悬停 Action ......

有什么方法可以让它点击通过，但实际上捕捉到了悬停触发？

提前致谢!

JSFiddle

附言只是想知道，是否有任何方法可以实际检测悬停在 PNG 图像的非透明部分？

Answer 1

这是我的做法:http://jsfiddle.net/tZqQc/7/

我在 <p> 上做了悬停事件标签，但我想我得到了你想要的相同效果。

关键是jQuery代码:

$("p").mouseenter(function() {
    $( "#theimg" ).fadeTo( "slow" , 0.2, function() {});
});

$("p").mouseleave(function() {
    $( "#theimg" ).fadeTo( "slow" , 1.0, function() {});
});

至于透明悬停问题，从技术上讲，您可以使用图像映射来解决这个问题。但是这对这张图片来说需要做很多工作(这可能不值得)!