（Bootstrap）悬停按钮上的响应图像？

Question

我正在尝试在悬停时将图像显示在按钮上。我知道对于Bootstrap，我可以在声明HTML中的图像的同时添加.img-responsive类，但我似乎无法正确处理图像的加载方式。按钮本身已经响应。我使用了几块CSS并通过CSS预加载图像。什么是最好的解决方法？

另外，有没有办法添加某种动画来显示图像？就像让图像从按钮底部向上滚动一样？

Answer 1

看看.img-responsive做了什么？它没有做太多。我建议您覆盖课程并应用您认为最适合您网站的实际响应式设计。

取自 boostrap.css ：

 .img-responsive{
      display: block;
      max-width: 100%;
      height: auto;
    }

如果您已经知道图像应该如何查看某些屏幕尺寸，也可以使用以下内容

@media screen and (min-width:500px) {
  .img-responsive{
    //...
  }
}

对于动画。您可以将其初始设置为隐藏并等待图像完成加载。然后你可以$(#imageId).show("fast");（或＆＃34;慢＆＃34;）。或者如果你想完全控制你的动画，那么我建议你按照jquery文档来说明如何做到这一点。 http://api.jquery.com/animate/