javascript - png图像的透明区域没有悬停 Action html css

Question

我的网页上有一个png图片，它的形状是菱形，所以图片的四个 Angular 是透明的...

每当我将鼠标悬停在图像上时，我都会让它向左和顶部移动 -10px

#one{
    position:relative;
    top:10px;
    left:-234px;
    float:left;
    -webkit-transition: all .2s ease-out;
}

#one:hover{
    top:0px;
    left:-244px;
    -webkit-filter:opacity(0);
}

我想做的就是不要通过将鼠标悬停在透明区域来移动图像...

有可能吗……我想用css或者javascript…… 我不知道 jquery 所以如果你告诉我 jquery ans 请告诉我如何在我的 html 页面中链接它...

Answer 1

我建议在旋转 45 度的图像前面添加一个附加元素，然后将该元素用于悬停操作。

这将使您能够仅在将鼠标悬停在菱形上时移动图像。

请注意，如果没有额外的逻辑，这仅适用于支持 CSS3 转换的现代浏览器(Webkit、Mozilla 和 IE10)。

#one-wrapper{
    position: absolute;
    top: 50px;
    left: 50px;
    height: 100px;
    width: 100px;
}

#one{
    position: absolute;
    top: 0;
    left: 0;
    height: 100px;
    width: 100px;
    z-index: 1;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

#one-action{
    position: absolute;
    top: 0;
    left: 0;
    height: 70px;
    width: 70px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: 50px 50px;
    -moz-transform-origin: 50px 50px;
    transform-origin: 50px 50px;
    z-index: 2;
}

#one-action:hover,
#one-action:hover + #one{
    top: -10px;
    left: -10px;
}

<div id="one-wrapper">
  <span id="one-action"></span>
  <img id="one" src="image-url.png" alt="" />
</div>

根据需要更新顶部/左侧位置。