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

我建议在图像前面添加一个旋转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 2

将其添加为div的背景并将hover伪类应用于该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 3

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

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

3 个答案: