23

ホバーすると展開するアイコンがいくつかあります。

  .icon
  {
      width: 128px;
      height: 128px;
      background: url(icons.png) no-repeat;
      background-position: left top;
      -webkit-transition: width .2s;
  }
  .icon.icon1:hover
  {
      width: 270px;
      backgorund-position-x: -128px;
  }

アイコンにカーソルを合わせると幅が変更されるため、-webkit-transition によりアイコンが展開されます。.icon1 と .icon2 では左から右に展開しますが、.icon3 と .icon4 では逆 (右から左) にする必要があります。

4

1 に答える 1

26

使用position:absoluteおよび設定right:0およびtop:0

    .icon{
    width: 128px;
    height: 128px;
    background: url(icons.png) no-repeat red;
    background-position: left top;
    -webkit-transition: width .2s;
    position:absolute;
    top:0; right:0; 
}
.icon:hover{
    width:250px
}

デモ

于 2013-03-19T08:10:53.050 に答える