CSS-在其他方向上扩展宽度

本文介绍了CSS-在其他方向上扩展宽度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

当我将它们悬停在图标上时，它们会展开:

I've got some icons that expands when I hover them:

  .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相反(从右向左)扩展.

When I hover an icon it's width is changed, so because of the -webkit-transition is will expand the icon. The way it expands is from left to right which is good for .icon1 and .icon2, but it should be the other way around (right to left) with .icon3 and .icon4.

推荐答案

使用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
}

演示

DEMO

这篇关于CSS-在其他方向上扩展宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！