更新

Question

我有一个图标列表，在悬停时，图标的大小会增加。但是，每个图标下方的文字随着尺寸的增加而向下移动。如何才能使文本移动到顶部？

HTML：

<application-policy name="BasicAuthWebAppPolicy">
 <authentication>
   <login-module code="org.jboss.security.auth.spi.UsersRolesLoginModule"       flag="required">
     <module-option name="usersProperties">basicSecurityWebApp-users.properties</module-option>
     <module-option name="rolesProperties">basicSecurityWebApp-roles.properties</module-option>
   </login-module>
 </authentication>

CSS：

<div class="grid-wrap">
<div class="grid-col one-quarter">
  <span class="lnr lnr-mustache"></span>
  <p>Text 1</p>
</div>
<div class="grid-col one-quarter">
  <span class="lnr lnr-sun"></span>
  <p>Text 1</p>
</div>
<div class="grid-col one-quarter">
  <span class="lnr lnr-cog"></span>
  <p>Text 1</p>
</div>
<div class="grid-col one-quarter">
  <span class="lnr lnr-star"></span>
  <p>Text 1</p>
</div>

Plunker：http://plnkr.co/edit/UxuLvRPP1RURdXGBfpb7?p=preview

注意：理想情况下，HTML的结构不应更改为维护移动设备，平板电脑和台式机映像下方文本的重要性。

Answer 1

制作一个容器，其中包含最大可能的元素大小？

<div class='parent'>
    <div class='lnr lnr-cog'>
    </div>
</div>

CSS

.parent{width:1.5em;height:1.5em;}
.parent .lnr{font-size:0.8em;}
.parent .lnr:hover{font-size:1em;}

这应该很好用。

Answer 2

您可以使用transform:scale和transform-origin执行此操作。你还需要一些其他的小改动。所以试试这个Plunk

以下是您需要更改的CSS代码段：

.lnr {
   font-size: 20pt;
   line-height: 1em;
   width: 1em;
   display: inline-block;
   margin-left: 10px;
   margin-right: 5px;
}

.lnr:hover {
   transform:scale(1.5);
   transform-origin:50% 50%;
   line-height: 1em;
   width: 1em;
   display: inline-block;
   margin-left: 10px;
   margin-right: 5px;
}

完整代码：

＆＃13;

/* Styles go here */
.grid-wrap {
    margin-left: -3em; /* the same as your gutter */
    clear: both;
}
   
.grid-col {
    float: left;
    padding-left: 3em; /* this is your gutter between columns */
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.one-quarter {
  width: 25%;
}

.lnr {
    font-size: 20pt;
    line-height: 1em;
    width: 1em;
    display: inline-block;
    margin-left: 10px;
    margin-right: 5px;
}

.lnr:hover {
    transform:scale(1.5);
    transform-origin:50% 50%;
    line-height: 1em;
    -webkit-font-smoothing: antialiased;
    width: 1em;
    display: inline-block;
    margin-left: 10px;
    margin-right: 5px;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  <script src="script.js"></script>
</head>

<body>
  <h1>Hello Plunker!</h1>

  <div class="grid-wrap">
    <div class="grid-col one-quarter">
      <span class="lnr lnr-mustache"></span>
      <p>Text 1</p>
    </div>
    <div class="grid-col one-quarter">
      <span class="lnr lnr-sun"></span>
      <p>Text 1</p>
    </div>
    <div class="grid-col one-quarter">
      <span class="lnr lnr-cog"></span>
      <p>Text 1</p>
    </div>
    <div class="grid-col one-quarter">
      <span class="lnr lnr-star"></span>
      <p>Text 1</p>
    </div>
  </div>
</body>

</html>

＆＃13;

更新

要添加动画，请在CSS中的.lnr和.lnr:hover添加以下内容：

-webkit-transition: .2s ease;
-moz-transition: .2s ease;
-o-transition: .2s ease;
transition: .2 ease;

在这里，你得到一个0.2秒的动画。您还可以根据需要选择其他动画类型，例如linear。更多信息here

Updated Plunk

停止悬停移动文本

2 个答案:

更新