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

有两种方法可以做这两件事。

两者中的第一个是使背景图像变暗。尽管您实际上并没有将其调暗。

创建一个将图像作为背景图像的 div。在那个 div 里面，创建第二个 div，然后把你的按钮放在里面。第二个 div 的背景图像应该是一个单像素 .PNG 的背景图像。PNG 应该是不透明度为 50 或 60% 的白色像素。如果您网站的背景不是白色，则将此像素匹配为与文档背景相同的颜色。

在文档加载时，以 0 速度淡出包含按钮的内部 div 到 0。不要隐藏它或设置为 display:none ，否则您将无法在其上触发悬停事件。

在内部 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);});


});