Блог

Я пытаюсь взять div, у которого всегда отображается интервал, и абзац, который находится под ним, отображается при наведении курсора мыши на div. То, что у меня работает, за исключением того, что я хочу, чтобы некоторые из этих div меняли ширину, чтобы они переходили вниз, а затем влево. По умолчанию (и я предполагаю, что браузер по умолчанию), кажется, всегда находится вниз, а затем вправо.

Ссылка на скрипку и код ниже. Есть два красных блока div с текстом заголовка, при наведении на которые ширина увеличивается, и отображается абзац под ним. Что я хочу сделать, так это переместить нижний правый div (заголовок Here2 текст) влево. Таким образом, красный фон вообще не будет переходить вправо.

ПРИМЕЧАНИЕ: положение элементов 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;
}
  

Попробуйте выполнить следующее:

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

Я боролся с этим и после нескольких поисков нашел решение в 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

Дэйв

Попробуйте выполнить следующее:

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

Добавьте это свойство, чтобы не было переполнения текста, когда мышь больше не находится в режиме наведения.

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

Один из способов сделать это — установить right свойства и bottom вместо свойств top и left .

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

Обновлен jsfiddle