个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我有一个如下所示的 GridView :
jQuery(window).resize(function(evt) {
jQuery(".grid-content > div > div > .channelImage").height(jQuery(".grid-content > div > div > .channelImage").width());
});
jQuery(function() {
jQuery(window).resize();
}); body {
background-color: rgba(48, 48, 48, 1);
}
body>.container {
max-width: 90vw;
}
.previewrow {
height: 40vh;
}
.preview {
position: absolute;
left: 0;
right: 0;
height: 40vh;
}
.grid-content>div>div {
margin: 3vw;
box-shadow: 6px 6px 6px black;
border: 1px solid white;
text-align: center;
color: white;
}
.grid-content>div {
float: left;
}
.grid-content>div>div>.channelImage {}
.grid-content>div>div>.channelImage:before {
content: " ";
display: inline-block;
height: 100%;
vertical-align: middle;
}
.grid-content>div:hover>div {
box-shadow: 0 0 0 black;
transition: all 0.25s;
margin: 1em;
}<!-- Bootstrap and JavaScript -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap-grid.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="container body-content">
<div class="grid-content">
<!-- One -->
<div class="col-lg-3 col-md-4 col-sm-3 col-xs-2">
<div>
<div class="channelImage">
<img width="30%" />
</div>
<div>
Some text
</div>
</div>
</div>
<!-- Two -->
<div class="col-lg-3 col-md-4 col-sm-3 col-xs-2">
<div>
<div class="channelImage">
<img width="30%" />
</div>
<div>
Some text
</div>
</div>
</div>
<!-- Three -->
<div class="col-lg-3 col-md-4 col-sm-3 col-xs-2">
<div>
<div class="channelImage">
<img width="30%" />
</div>
<div>
some text
</div>
</div>
</div>
<!-- Four -->
<div class="col-lg-3 col-md-4 col-sm-3 col-xs-2">
<div>
<div class="channelImage">
<img width="30%" />
</div>
<div>
Some text
</div>
</div>
</div>
<!-- Five -->
<div class="col-lg-3 col-md-4 col-sm-3 col-xs-2">
<div>
<div class="channelImage">
<img width="30%" />
</div>
<div>
Some text
</div>
</div>
</div>
</div>
</div>
</body>如您所见，只要用户将鼠标悬停在正方形上，我就会尝试放大正方形。但是调整边距会导致其他框被移动。我怎样才能扩大方 block ，使它们不会移动其他方 block ？
最佳答案
通过使用以下 CSS 并将其应用于您想要影响的元素，您可以在不移动任何东西的情况下使某些东西变大:
.class {
transition: .10s, transform .10s ease;
-moz-transition: .10s, transform .10s ease;
-webkit-transition: .10s, transform .10s ease;
}
.class:hover {
-ms-transform: scale(1.01); /* IE 9 */
-webkit-transform: scale(1.01); /* Safari */
transform: scale(1.01);
}
作为奖励，您可以在单击它时使其缩小以产生类似 Spring 的效果:
.class:active {
-ms-transform: scale(0.99); /* IE 9 */
-webkit-transform: scale(0.99); /* Safari */
transform: scale(0.99);
}
关于css - Bootstrap 列在悬停时放大(如 Netflix)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51115534/
24
4
0
我正在开发这样的摄影应用程序: https://play.google.com/store/apps/details?id=com.photo.editor.collage.maker.photobl
我正在尝试创建一个可以像在 Excel 中一样放大和缩小的 QTableView。 此处提出了类似的问题:Zooming function on a QWidget 但是，我在 PyQt 而不是 C
我想找到放大/缩小 TVirtualStringTree 的“最佳方法”。 “放大”的意思是模仿放大镜。 必须通过优先使用 TVirtualStringTree 控件中专门用于此目的的属性/方法来理解
有没有办法在emacs上放大和缩小(动态改变字体大小，相当流畅)？ 最佳答案 尝试 C-x C-+ 和 C-x C--；即 Control-x Control-减号/Control-再加上。 在一个组
我在使用 Leaflet 时遇到问题。我在 map 上找到了一堆标记(在我的例子中它代表高尔夫球场)。但是，当我放大/缩小时，标记在 map 上移动。 浏览网页后，解决方案似乎是 iconAnchor
我在使用 Leaflet 时遇到问题。我在 map 上找到了一堆标记(在我的例子中它代表高尔夫球场)。但是，当我放大/缩小时，标记在 map 上移动。 浏览网页后，解决方案似乎是 iconAnchor
我正在开发一款非常低分辨率的游戏，我需要放大它才能看到。我知道我可以使用 Graphics.scale(float x, float y) 但我想放大到中心。如何缩放中心的图形？有没有更简单的方法来制
我有这种方法可以向前/向后和向左/向右平移相机。我不确定为什么，但是是什么导致相机在靠近地形放大时移动得很好，但在缩小时移动得非常慢？ 这是我平移相机的方式: void CameraPan(){
我正在尝试像这样进行缩放:zoom the imageview on the double click in viewflipper in android 我尝试将该代码改编为我的项目，但它不起作用.
$(window).height() 获取页面加载时窗口的高度。但是，在放大/缩小时，我想要新的视点高度。这可能吗？ 它可以很好地调整普通浏览器的大小，但我想在移动设备上放大/缩小不会触发 $(win
我正在尝试制作一个显示图像、 block 文本和按钮的面板，与下一个模型上显示的面板保持相似的比率，无论页面大小/缩放比例是多少。 我首先尝试使用横写文本的图像(即不对文本、图像和背景使用不同的部分或
Blockquote 大家好，请问是否可以在此代码中添加放大、缩小功能？我对 html 很陌生。任何帮助将不胜感激。 Career Center
我有一个由 3 个元素组成的搜索栏。 首先 a 保存从下拉列表中选择的值。 第二个清除选择的元素 第三个供用户在下拉菜单之间切换。 我的问题 - 当我缩放超过 100% 时，img 和按钮元素变大了一
我目前遇到网站页脚的问题。 当以 100% 大小(正常大小)处理时，页脚对齐得很好。但是，当我调整它的大小时，它完全不对齐并位于左侧，它需要保持居中。 屏幕截图: 相关 CSS: /* Dark bl
我实现了 3 个按钮来允许用户放大、缩小和返回到默认大小。 脚本可以进行放大和缩小，但我还有 2 个问题无法解决。 第一个问题: 每次放大时，要缩放的图像仍然到达我的窗口的限制，当图像左右没有任何空间
即使我在网页上放大或缩小，我也试图让 shadowbox 保持在同一个地方。我尝试以百分比而不是像素为单位来制作尺寸，但我不知道应该使用哪种属性组合。 这是我想要实现的结果:来自这里的外部阴影框效果h
我有点困惑。我按照 Apple 的建议放大 ScrollView ，但没有任何反应。 代码: import UIKit import SpriteKit class ScrollViewControl
我正在尝试通过导航实现类似 Bootstrap 的 header ，但我刚刚发现当我缩小窗口时， header 内的内容变得困惑并且 header 也最小化而不是保持相同的大小。我已经在页眉上使用了
我正在开发一个包含许多 UIView 的 iOS 应用程序。 UINavigation 用于在这些 View 之间导航。 我的一个 UIView 包含 UITextField。我的问题是，当我缩放时，
我正在尝试从 FITS 文件中绘制一些数据，我想知道是否有人知道如何关注绘图轴的某些区域？下面是一些示例代码: import pyfits from matplotlib import pyplot
我是一名优秀的程序员,十分优秀！