CSS过渡宽度到左边

Question

我试图采取一个div，始终显示一个跨度，并在它下面显示的段落悬停在div。我有什么工作，除了我想要一些这些div的过渡宽度，所以他们向下过渡，然后离开。默认设置(我猜浏览器默认设置)似乎总是先下后右。

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

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

http://jsfiddle.net/szfiddle/qP5fW/1/

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;
}

Answer 1

尝试如下:

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

Answer 2

我一直在努力解决这个问题，经过几次搜索，在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

戴夫

Answer 3

尝试如下:

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

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

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

Answer 4

设置right和bottom属性，而不是top和left属性。

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

更新jsfiddle