Question

我在悬停时改变我的字体真棒图标，使它们更大。我遇到的问题是，通过使1个图标变大，它会移动旁边的其他图标。 I.E.图标会上下移动。

我已经创建了这个基础小提琴来显示问题。我已经弄乱了填充和边距来尝试创建每个图标周围所需的空间，以便空间足够大，其他图标不会移动。我肯定是一名CSS菜鸟，所以请放轻松;）

这是小提琴： http://jsfiddle.net/newmanw/MUHVD/

标记：

<title>Bootstrap 101 Template</title>
 <body>
    <div>
        <span>
            <i class="icon icon-warning-sign"></i>
            <i class="icon icon-ok"></i>
            <i class="icon icon-flag"></i>
        </span>
    </div>
  </body>

CSS

@import url('https://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css');

.icon:hover{
    cursor: pointer;
    font-size: 28px;
}

Answer 1

这对你有用吗？

.icon:hover{
    cursor: pointer;
    font-size: 28px;
 }
 .icon{
   float:left;
   width:30px;   
  text-align:center;
}

http://jsfiddle.net/MUHVD/1/

Answer 2

在某种程度上，这是不可能做到的。如果你将墙的底部砖做得更大，那么所有其他的砖都会被推开。

你可以使用一些强制图标进入absolute位置的javascript来执行此操作，并在调整大小时将它们保持静止。

你还可以给图标足够的“填充”（不一定是padding），以便在事情调整时保持位置。

http://jsfiddle.net/MUHVD/5/

Answer 3

如果您将图标上的vertical-align属性设置为text-top，它将保持其位置垂直相同，但仍需要水平移动

.icon {
    vertical-align: text-top;
}

.icon:hover{
    cursor: pointer;
    font-size: 28px;
}

http://jsfiddle.net/MUHVD/6/

Answer 4

您应该使用float: left;到.icon，并指定鼠标悬停后的字体大小增长的宽度，例如。在这里，您希望增长到28px，因此您需要为width: 28px;指定.icon。

悬停时改变图标大小不影响其他图标

4 个答案: