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

それを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 に答える
0

あなたの最善の策はHTML 画像マップ(そのような目的のために作成された) であり、何らかの理由でそれが本当に気に入らない場合は、SVGを使用することもできます。

于 2013-02-10T15:28:07.950 に答える