向左的 CSS 过渡宽度答案

【问题标题】：CSS transition width to the left向左的 CSS 过渡宽度
【发布时间】：2014-08-07 19:20:40
【问题描述】：

我正在尝试获取一个始终显示跨度的 div，并将鼠标悬停在该 div 上时显示其下方的段落。我有什么工作，除了我希望其中一些 div 转换宽度，以便它们向下转换然后离开。默认值（我猜是浏览器默认值）似乎总是先下后右。

链接到下面的小提琴和代码。有两个带有标题文本的红色框 div，当您将鼠标悬停在它们上方时，宽度会扩大并显示其下方的段落。我要做的是使右下角的 div（Title Here2 文本）向左过渡。所以红色背景根本不会向右过渡。

注意：页面上 div 的位置不能改变。

HTML

<div class="hpBox">
    <span>Title Here</span>
    <p>Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here.</p>
</div>
<div class="hpBox hpBox2">
    <span>Title Here2</span>
    <p>Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here.</p>
</div>

CSS

.hpBox {
    display: inline-block;
    padding: 10px;
    background: red;
    -webkit-transition: 1s linear;
    transition: 1s linear;
    max-width:200px;
    max-height:22px;
    position:absolute;
}
.hpBox p {
    max-height: 0;
    max-width: 0;
    overflow: hidden;
    -webkit-transition: 2s linear;
    transition: 2s linear;
}
.hpBox:hover {
    max-width:400px;
    max-height:200px;
}
.hpBox:hover p {
    max-height: 200px;
    max-width: 400px;
}
.hpBox2 {
  left:60%;
  top:250px;
}

【问题讨论】：

标签： html css css-transitions

【解决方案1】：

我为此苦苦挣扎，经过几次搜索后，在 CodePen 上找到了解决方案。

这里是链接：http://codepen.io/heisters/pen/gMgboJ

为我工作。

HTML

<div>
  <h1>Normal</h1>
  <item>One</item>
  <item>Two</item>
  <item>Three</item>
  <item>Four</item>
</div>
<div class="grow-left">
  <h1>Grow Left</h1>
  <item>One</item>
  <item>Two</item>
  <item>Three</item>
  <item>Four</item>
</div>

CSS：

div {
  display: block;
  width: 200px;
  margin: auto;
  background-color: #EEE;
}
item {
  display: block;
  background-color: #FDD;
  transition: all, 0.5s;
  width: 200px;
}

item:hover {
  width: 400px;
}

.grow-left {
  direction: rtl;
}
.grow-left > * {
  direction: ltr;
}

HTH

戴夫

【讨论】：

【解决方案2】：

其中一种方法是设置right 和bottom 属性，而不是top 和left 属性。

.hpBox2 {
  right: 35%;
  bottom: -121px;
}

更新jsfiddle

【讨论】：

【解决方案3】：

尝试以下方法：

   .hpBox2 {
    top: 250px
    right: 40%;
    text-align: right;
  }

添加此属性，当鼠标不再处于悬停模式时，文本不会溢出。

.hpBox {
    /* ... */
    overflow:hidden;
}

【讨论】：

【解决方案4】：

尝试以下方法：

 .hpBox2 {
   top:250px;
   right: 20%;
   text-align: right;
 }

【讨论】：

完美。不需要文本右对齐，但可以。