twitter-bootstrap 使用 Twitter Bootstrap 在悬停时放大图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16716258/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Enlarge image on hover using Twitter Bootstrap
提问by Ruut
I am new to bootstrap and would like to enlarge all images with class img-roundedon hoverring
我是引导程序的新手，想在悬停时放大带有img-rounded类的所有图像
I implemented it like this:
我是这样实现的：
<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>
Unfortunately the bounding box around the enlarged image is not enlarged. How to fix this?
不幸的是，放大图像周围的边界框没有放大。如何解决这个问题？
回答by davidkonrad
This is caused by the popovers default max-width: 276px. Simply add
这是由 popovers default 引起的max-width: 276px。只需添加
<style type="text/css">
.popover {
max-width: 1000px;
}
</style>
(or any other value, auto does not work here) and the popover will fit the image.
（或任何其他值， auto 在这里不起作用）并且弹出框将适合图像。
回答by Colt Stumpf
You could do this easily just using css.
您只需使用 css 即可轻松完成此操作。
#img1{
height:200px;
}
#img1:hover{
height:400px;
}
Also you can apply a number of additional effects as needed with far less code. You can also manage the parent div accordingly to match this css rule. Not ALL things require JS.
您还可以根据需要使用更少的代码应用许多附加效果。您还可以相应地管理父 div 以匹配此 css 规则。并非所有事情都需要 JS。
