Question

我使用宽度和填充底部创建了一个响应方块网格。我想创建一个悬停效果，其中悬停的方块会稍微扩大。然而，我尝试它的方式使得整个布局在广场悬停时陷入困境。我试图通过在徘徊时改变边距来留出更多空间，但这并没有改变任何东西。

这是我的代码的一部分：https://jsfiddle.net/p3tcog0o/

HTML：

<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>

CSS：

.square{
  width:15%;
  padding-bottom:15%;
  background-color:red;
  float:left;
  margin:3%;
  transition: .5s width, .5s padding-bottom;

}
.square:hover{
  width:16%;
  padding-bottom:16%;
  margin:2%;
}

Answer 1

您可以使用.square{ width:15%; padding-bottom:15%; background-color:red; float:left; margin:3%; transition: .5s width, .5s padding-bottom, .5s transform; } .square:hover{ transform: scale(1.5); }

<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>

var pattern = @"\[.*\]";
var query = "University of Hawaii [Maui/Oahu/Kaui]";
var result = Regex.Replace(query, pattern);
Console.WriteLine(result);

扩大响应方形布局的正方形

1 个答案: