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