1

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

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

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

有什么办法可以让它点击，但实际上抓住悬停触发器？

提前致谢！

JSFiddle

PS 只是想知道，有没有什么方法可以仅检测 PNG 图像的非透明部分上的悬停？

4

1 回答 1

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() {});
});

至于透明悬停问题，从技术上讲，您可以使用图像映射来做到这一点。但这对于这张照片来说需要做很多工作（这可能不值得）！

于 2013-10-17T16:58:45.877 回答