使用 Twitter Bootstrap 放大悬停图像答案

【问题标题】：Enlarge image on hover using Twitter Bootstrap使用 Twitter Bootstrap 放大悬停图像
【发布时间】：2013-05-23 14:13:34
【问题描述】：

我是 bootstrap 新手，想在悬停时放大所有具有 img-rounded 类的图像

我是这样实现的：

<div class="container">
  <div class="row">
    <div class="span4">
      <div class="well">
        <img src="MyImage.png" class="img-rounded">
      </div>
    </div>
  </div>
</div>

<script>
  $( document ).ready(function() {
    $('.img-rounded').popover({
      html: true,
      trigger: 'hover',
      placement: 'bottom',
      content: function () {
        return 
          '<img class="img-rounded" style="float:right;width:500px;max-width:500px;" src="
          +$(this)[0].src + '" />';
      }
    });
  });

</script>

不幸的是，放大图像周围的边界框没有放大。如何解决这个问题？

【问题讨论】：

你有演示吗？

标签： javascript jquery twitter-bootstrap popover

【解决方案1】：

这是由弹出框默认 max-width: 276px 引起的。只需添加

<style type="text/css">
.popover {
    max-width: 1000px;
}
</style>

（或任何其他值，auto 在这里不起作用）并且弹出框将适合图像。

【讨论】：

【解决方案2】：

您只需使用 css 即可轻松完成此操作。

#img1{
height:200px;
}
#img1:hover{
height:400px;
}

您还可以根据需要使用更少的代码应用许多附加效果。您还可以相应地管理父 div 以匹配此 css 规则。不是所有的东西都需要 JS。

【讨论】：