Question

我正在尝试使用一个总是显示跨度的div，并将鼠标悬停在div上时显示在其下方的段落。我有什么工作，除了我想要一些div转换宽度，以便它们向下转换然后向左转。默认（我猜测浏览器默认值）似乎总是向下然后向右。

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

注意：页面上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;
}

Answer 1

尝试以下方法：

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

Answer 2

尝试以下方法：

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

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

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

Answer 3

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

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

更新了jsfiddle

Answer 4

我正在努力解决这个问题，经过一些搜索后找到了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

戴夫

CSS过渡宽度向左

4 个答案: