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);});


});