манипулирование положением div on hover

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

Это упрощенный пример того, с чем я работаю, поэтому, к сожалению, я на 99% уверен, что относительное позиционирование на .work-wrapper должно сказать.

https://jsfiddle.net/04vjcfLe/5/

Я попытался макс ширину на контейнере и несколько других трюков, но я теперь потерял.

.work-container { 
    width: 50%; 
    max-width: 50%; 
} 

.work-wrapper { 
    display: inline-block; 
    position: relative; 
    width: 49%; 
    transition: all ease 0.8s; 
}

источник

2016-07-25 Max Power

Решение 1:

.work-container { 
 
    width: 50%; 
 
    max-width: 50%; 
 
    position: relative; 
 
    height: 100px; 
 
} 
 

 
.work-1, .work-2 { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom:0; 
 
    width: 50%; 
 
\t transition: all ease 0.8s; 
 
} 
 

 
.work-1:hover, .work-2:hover { 
 
    width: 100%; 
 
\t transition: all ease 0.8s; 
 
} 
 

 
.work-1:hover + .work-2 { 
 
    width: 0%; 
 
\t transition: all ease 0.8s; 
 
} 
 

 
.work-1 { 
 
\t background-color: #FEF102; 
 
    left: 0; 
 
} 
 

 
.work-2 { 
 
\t background-color: #4B3E7F; 
 
    right: 0; 
 
}

<div class="work-container"> 
 
    <div class="work-1"></div> 
 
    <div class="work-2"></div> 
 
</div>

Решение 2:

В этом решении нет абсолютного или относительного позиционирования, так что вы чтобы установить их, но вы хотите их.

.work-container { 
 
    width: 50%; 
 
    max-width: 50%; 
 
    display: flex; 
 
    flex-direction: row; 
 
    align-items: stretch; 
 
    height: 100px; 
 
} 
 

 
.work-1, .work-2 { 
 
    width: 50%; 
 
    transition: all ease 0.8s; 
 
} 
 

 
.work-container .work-1:hover, .work-container .work-2:hover { 
 
    width: 100% !important; 
 
    transition: all ease 0.8s; 
 
} 
 

 
.work-container:hover .work-1 { 
 
    width: 0%; 
 
    transition: all ease 0.8s; 
 
} 
 

 
.work-container .work-1:hover + .work-2 { 
 
    width: 0%; 
 
    transition: all ease 0.8s; 
 
} 
 

 
.work-1 { 
 
\t background-color: #FEF102; 
 
    left: 0; 
 
} 
 

 
.work-2 { 
 
\t background-color: #4B3E7F; 
 
    right: 0; 
 
}

<div class="work-container"> 
 
    <div class="work-1"></div> 
 
    <div class="work-2"></div> 
 
</div>

источник

2016-07-25 07:09:06

спасибо, но она должна быть основными ящиками должно быть относительное позиционирование, потому что у меня есть абсолютные div внутри. –

@MaxPower, затем см. Второе решение. Вы должны быть в состоянии разработать точное решение, которое вы хотите оттуда. –

Спасибо, чувак. Вы ответили на мой вопрос, все еще имея проблему, реализующую это в моем проекте, но, надеюсь, я смогу это исправить. –

Добавить float:right к классу работы-2 и z-index:6 к .W-2: парить .Работы-2

.work-container { 
 
    width: 50%; 
 
    max-width: 50%; 
 
} 
 

 
.work-wrapper { 
 
\t display: inline-block; 
 
\t position: relative; 
 
    width: 49%; 
 
\t transition: all ease 0.8s; 
 
} 
 

 
.work-1, .work-2 { 
 
\t transition: all ease 0.8s; 
 
    width: 100%; 
 
    padding-top: 100%; 
 
\t position: relative; 
 
} 
 

 
.work-1 { 
 
\t background-color: #FEF102; 
 
\t z-index: 5; 
 
} 
 

 
.work-2 { 
 
\t background-color: #4B3E7F; 
 
    float:right; 
 
} 
 

 
.w-1:hover .work-1 { 
 
\t width: 202%; 
 
    float:left; 
 
} 
 

 
.w-2:hover .work-2 { 
 
\t width: 202%; 
 
    z-index:6; 
 
}

<div class="work-container"> 
 
<div class="work-wrapper w-1"> 
 
    <div class="work-1"></div> 
 
</div> 
 
<div class="work-wrapper w-2"> 
 
    <div class="work-2"></div> 
 
</div> 
 
</div>

источник

2016-07-25 07:18:51

Обратите внимание, что из-за того, что z-индексация не является переходной, происходит разрыв, когда вы перестаете зависать. –

Хорошо работает, но должен был дать ответ Deny. +1 хотя :) –

манипулирование положением div on hover

ответ

Смежные вопросы