悬停时的图像效果不透明

Question

Is it somehow possible to make a image have an hover effect if the hovered place of the image, is not transparent.

As I have a image with some transparent.

Then I want to make a hover effect which will first run when the mouse is over the image on a place where the image is not transparent.

Is that possible somehow?

Hope it is understand able.

Answer 1

也许有可能，以某种方式可以固定位置或坐标值，我认为您应该使用画布并将图像放置在其中，并借助鼠标事件可以捕获鼠标功能并尝试使用jQuery来实现悬停效果。

Answer 2

Have you tried with the map tag? http://www.w3schools.com/tags/tag_map.asp

Answer 3

Its possible using the canvas element and I actually made a plugin for this^^ Maybe this might help you: https://github.com/Bahlor/jQuery-Pixel-Related-Object-Selection

This script allows to check for transparent / non-transparent areas of an image and also allows clickthrough if another element is behind a transparent area of an overlapping element. Works with image elements and divs using background-image.