CSS динамически изменяет интерактивную область при наведении, чтобы изменить размер, если мышь находится в нижней половине div
У меня есть абсолютный div, который расширяется при наведении курсора, меняя его на position: static для отображения полного текста внутри.
Мне интересно, можно ли сделать это сжатие, если пользователь находится за пределами исходных границ, а не в новом увеличенном поле.
.box {
position:relative;
overflow:hidden;
}
.box:hover {
position:static;
}
Это работает, но немного раздражает, поскольку заполняет часть экрана, и пользователь должен переместить мышь за пределы div, чтобы он сжался, я бы хотел, чтобы они переместили мышь за пределы исходного размера div, а не переполнение div, чтобы сжать его обратно.
Какие-нибудь уловки, чтобы сохранить интерактивную область в исходных границах при отображении расширенного div?
это код, я просто помещаю большое количество текста в поле и скрываю остальное с помощью переполнения, чтобы он отображал полный текст при наведении, я бы хотел, чтобы он уменьшался на основе переполнения, а не зависал за пределами измененного размера коробка.
Ответы 1
Я добавил этот стиль (background-color: rgba(0,0,0,0.2);), чтобы показать исходный контейнер, его следует изменить на background-color: transparent; для фактического кода.
body {
margin: 0;
}
.box2 {
position: relative;
overflow: hidden;
width: 100px;
height: 100px;
transition: all 2s;
background-color: red;
top: 0;
}
.box {
position: absolute;
overflow: hidden;
width: 100px;
height: 100px;
top: 0;
left: 0;
transition: all 2s;
background-color: rgba(0,0,0,0.2);
z-index: 2;
}
.box:hover+.box2 {
position: static;
width: 200px;
height: 200px;
}<div class = "">
<div class = "box">
</div>
<div class = "box2">
</div>
</div>Вау, это работает, спасибо! Что делает "hover +"? Я не могу указать фиксированную высоту для контейнера, поэтому мне нужно посмотреть, работает ли он в реальной жизни.
Выбирает ближайшего следующего брата селектора, т.е. ближайшего следующего элемента .box div .box2
Спасибо, я попробую.
Однако имейте в виду, что это сделает любое содержимое .box2, которое покрывается .box, недоступным для взаимодействия с пользователем.
Div просто содержит статический текст, так что все в порядке, спасибо !!
Мне нужно поместить абсолютный div внутри контейнера, чтобы заполнить его, поскольку я не могу использовать фиксированные высоты. Поэтому мне нужно уменьшить поля в зависимости от дочернего элемента, поэтому я не могу использовать для этого селектор +.
Невозможно выбрать родительский div с помощью css, поэтому я использовал ваш трюк и поместил его перед и изменил размер абсолютного div с помощью javascript, чтобы он соответствовал другому div. Спасибо.
Любой шаблон, который вы пробовали, действительно пригодится?