我是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>
不幸的是,放大图像周围的边框不会放大。如何解决这个问题?
答案 0 :(得分:2)
这是由弹出窗口默认max-width: 276px
引起的。只需添加
<style type="text/css">
.popover {
max-width: 1000px;
}
</style>
(或任何其他值,auto在这里不起作用),弹出框将适合图像。
答案 1 :(得分:1)
您可以使用css轻松完成此操作。
#img1{
height:200px;
}
#img1:hover{
height:400px;
}
此外,您可以根据需要使用更少的代码来应用许多其他效果。 您还可以相应地管理父div以匹配此css规则。并非所有事情都需要JS。