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％。如果您网站的背景不是白色，则将此像素与文档背景颜色匹配。

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

在内部div上，附加一个悬停事件监听器，使其成为fadeIn和fadeOut。

这将产生图像淡出的效果，按钮将按预期显示。我们使用半透明背景并且不仅仅将内部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);});


});

Javascript图像悬停效果

2 个答案: