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

有兩種方法可以完成這兩件事。

兩者中的第一個是使背景圖像變暗。 盡管您實際上並沒有將其調暗。

使用該圖像作為背景圖像創建一個div。 在該div內，創建第二個div，然后將按鈕放在其中。 第二個div的背景圖像應該是單個像素.PNG的背景圖像。 PNG應該是不透明度為50或60％的白色像素。 如果您的網站背景不是白色，則將該像素與文檔背景顏色匹配。

加載文檔時，以0速度將包含按鈕的內部div淡出為0。 不要隱藏它或將其設置為顯示：無，否則您將無法在其上觸發懸停事件。

在內部div上，附加一個懸停事件偵聽器，使它逐漸變淡。

這將使圖像逐漸褪色，並且按鈕將按預期顯示。 我們使用半透明背景，而不只是將內部div漸變為0.6的原因是因為我們希望按鈕是100％可見的。 如果我們僅淡入內部div，則按鈕也將處於0.6。 使用顯示為100％不透明的半透明背景，會產生以下內容變暗的錯覺。

至於使圖像變灰，除了創建容器背景的重復圖像並在Photoshop中將其去飽和以使其為黑白外，您可以執行完全相同的操作。 然后將其用作內部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);});


});