如何忽略悬停事件的透明位置

Question

如何忽略悬停事件的透明位置？在第一张图片中，我需要忽略＆＃34;这个位置＆＃34;。我只需要悬停在菱形作品上。

<img src='http://s30.postimg.org/xpd6gwla9/1_Copy.jpg' id="first">

#first:hover {
  -moz-box-shadow:    3px 3px 5px 6px #ccc;
  -webkit-box-shadow: 3px 3px 5px 6px #ccc;
  box-shadow:         3px 3px 5px 6px #ccc;
}

Answer 1

你做不到。您可以使用SVG元素（不在<img>标记中），但对于普通图像，边界框将始终为矩形，并且任何框阴影或其他样式将应用于该框而不是你的形象轮廓。

Answer 2

<强> Demo

CSS

a {
    display:block;
    height:165px;
    width:165px;
    background:transparent;
    -ms-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    transform: rotate(45deg);
    text-align: center;
    margin: 37px;
}
.bg {
    position: absolute;
    background:url('http://s30.postimg.org/xpd6gwla9/1_Copy.jpg');
    background-repeat: no-repeat;
    height: 300px;
}

HTML

<div>
    <div class="bg">
        <div><a href="#"></a></div>
    </div>
</div>

Answer 3

您可以创建自己的菱形，而不是使用图片，然后像下面一样将鼠标悬停在其上

<强> FIDDLE DEMO

<div id='container'>
    <div id='diamond'></div>
</div>

<强> CSS

#diamond {
    width: 0;
    height: 0;
    border: 100px solid transparent;
    border-bottom-color: red;
    position: relative;
    top: -100px;
}
#diamond:after {
    content:'';
    position: absolute;
    left: -100px;
    top: 100px;
    width: 0;
    height: 0;
    border: 100px solid transparent;
    border-top-color: red;
}
#diamond:hover {
    -webkit-filter: drop-shadow(5px 5px 5px #222);
    filter: drop-shadow(5px 5px 5px #222);
}
#container {
    width:200px;
    height:200px;
    border:3px solid;
}

希望这就是你要找的东西