javascript - Javascript 画像ホバー効果

Question

画像を少し暗くしたり灰色にしたり、ホバリングしている画像の上に2つのボタンが表示される画像ホバー効果を追加する方法を知りたいです。

Answer 1

JavaScriptは必要ありません。次のHTMLを想定しています。

<div id="element">
  <img src="path/to/image.png" />
  <div>
    <button>Btn1</button>
    <button>Btn2</button>
  </div>
</div>

CSS：

#element {
  position:relative;
}
#element>img {transition: all 0.5s ease}
#element:hover>img {
  opacity:0.5;
  -webkit-filter:grayscale(0.5);
}
#element>div {
  opacity:0; transition: all 0.5s ease;
  position:absolute; bottom:0;
}
#element:hover>div {
  opacity:1;
}

Answer 2

2 つのことを行うには 2 つの方法があります。

2 つのうち 1 つ目は、背景画像を暗くすることです。あなたは実際にそれを暗くしていませんが。

画像を背景画像として div を作成します。その div 内に 2 つ目の div を作成し、その中にボタンを配置します。この 2 番目の div の背景画像は、単一ピクセルの .PNG である背景画像である必要があります。PNG は、不透明度が 50 または 60% の白いピクセルである必要があります。Web サイトの背景が白でない場合は、このピクセルをドキュメントの背景と同じ色に合わせます。

ドキュメントの読み込み時に、ボタンを含む内側の div を 0 の速度で 0 にフェードアウトします。非表示にしたり、display:none に設定したりしないでください。そうしないと、ホバー イベントをトリガーできなくなります。

内側の div で、fadeIn と fadeOut を発生させるホバー イベント リスナーをアタッチします。

これにより、画像がフェードアウトする効果が得られ、ボタンが期待どおりに表示されます。内側の div を 0.6 にフェードするだけでなく、半透明の背景を使用する理由は、ボタンを 100% 見えるようにするためです。内側の div のみをフェードインすると、ボタンも 0.6 になります。不透明度 100% で表示される半透明の背景を使用すると、下のコンテンツが淡色表示されているように見えます。

画像を灰色にする限り、コンテナの背景の複製画像を作成し、フォトショップで彩度を下げて白黒にすることを除いて、まったく同じことを行うことができます. 次に、それを内側の div の背景画像として使用します。内側の div がフェードインすると、背景画像がグレーにフェードインするように見えます。

「灰色にフェード」の作業コピーは次のとおりです。http://jsfiddle.net/D6mYh/

灰色にフェードするためのコード:

HTML:

<div id="outer">
   <div id="inner">
       <button id='test'>Test</button>
       <button id='cancel'>Cancel</button>
   </div>
</div>

CSS:

#outer {
    width: 400px;
    height: 300px;
    position: relative;
    border: 1px solid black;
    background:url('http://i.imgur.com/kRiuDiK.png');
}

#inner {
    width: 100%;
    height: 100%;
    background:url('http://i.imgur.com/jNLk69v.png');
}

#test {
    position: absolute;
    top: 100px;
    left: 100px;
}

#cancel {
    position: absolute;
    left: 200px;
    top: 100px;
}

およびJS：

$(function() {

    $("#inner").fadeTo(0,0).hover(function() {$(this).fadeTo(100,1);}, function() {$(this).fadeTo(100,0);});


});