1

我的网页上有一个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页面中链接它...

4

3 回答 3

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>

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

于 2013-02-10T15:02:30.343 回答
0

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

于 2013-02-10T15:28:07.950 回答
0

将其添加为 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);
}
于 2013-02-10T11:02:33.530 回答