放大图像悬停使用Twitter引导
Enlarge image on hover using Twitter Bootstrap
我是新手,想放大所有的图像,类img-round 在悬停
我是这样实现的:
<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>
不幸的是,放大图像周围的边界框没有放大。如何解决这个问题?
这是由弹出窗口默认的max-width: 276px
引起的。只需添加
<style type="text/css">
.popover {
max-width: 1000px;
}
</style>
(或任何其他值,auto在这里不起作用)和弹出窗口将适合图像
你可以很容易地使用css。
#img1{
height:200px;
}
#img1:hover{
height:400px;
}
还可以根据需要用更少的代码应用一些额外的效果。您还可以相应地管理父div以匹配此css规则。不是所有的东西都需要JS
相关文章:
- Twitter引导程序Typeahead-Id&标签
- 如何平滑地设置twitter引导程序进度条的动画
- Twitter引导程序在下拉列表打开时停止传播
- 具有Twitter引导程序的水平滚动表
- 如何使用Twitter引导程序点击按钮导航到另一个页面
- twitter引导崩溃在第一次点击后停止工作
- 将页面片段加载到Twitter引导模式中
- 覆盖twitter引导程序Textbox发光和阴影
- 如何使twitter引导程序子菜单在左侧打开
- Twitter引导模式通过Ajax更改内容
- asp.net应用程序活动类中的Twitter引导程序导航
- Twitter引导标签:如何跳转到锚点
- Twitter 引导中的图标箭头位置 - 折叠插件
- twitter引导模式——如何将数据传递给回调函数
- twitter引导程序转盘直接链接到特定幻灯片
- Twitter引导选项卡显示页面加载时未触发事件
- 折叠导航按钮不适用于twitter引导程序设计的移动设备
- 如何隐藏和显示twitter引导程序选项卡
- Twitter引导程序的高级表单库
- 使用Twitter引导程序's Scrollspy到延迟加载(滚动加载)异步JavaScript