png图像的透明区域没有悬停动作html css

Question

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

每当我将鼠标悬停在图像上时，我都会让它向左和向上移动 -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

将其添加为 div 的背景并将悬停伪类应用于该 div。

HTML：

<div id="one"></div>

CSS：

#one {
  position:relative;
  top:10px; 
  left:-234px; 
  float:left;
  -webkit-transition: all 0.2s ease-out;
  background:url(__path_of_image__);
}
#one:hover {
  top:0px; 
  left:-244px; 
  -webkit-filter:opacity(0);
}

Answer 2

我建议在旋转 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>

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

Answer 3

你最好的选择是HTML Image maps（它是为此目的而创建的），如果你出于某种原因真的不喜欢它，你也可以选择SVG。