Код: Выделить всё
const wrapper = document.querySelector('.wrapper');
const content = document.getElementById('content');
// Handle mouse enter (hover in)
wrapper.addEventListener('mouseenter', function() {
content.classList.add('expanded');
// Focus on the textarea when it becomes expanded
content.focus();
});
// Handle mouse leave (hover out)
wrapper.addEventListener('mouseleave', function() {
content.classList.remove('expanded');
});< /code>
/* Root container, which can hold other content */
.root {
position: relative;
overflow: hidden;
width: 300px;
height: 300px;
background-color: lightgray;
padding: 20px;
}
/* The wrapper is absolutely positioned within the root */
.wrapper {
position: absolute;
bottom: 0;
left: 0;
right: 0;
border: solid;
background-color: transparent;
}
/* Content (textarea) to be shown/hidden within the wrapper */
.content {
/* position: absolute; */
bottom: 0;
left: 0;
right: 0;
padding: 20px;
background-color: coral;
transition: all 0.3s ease-in-out;
opacity: 0;
transform: translateY(100%);
pointer-events: none;
}
.expanded {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}< /code>
Chat with Alice
Hi Alice
Hello Bob
If you click here, then hover, it will create the bug
Type your Message To Alice
Почему весь родительский макет поднимается, когда я нажимаю в любом месте, затем навещаю поле «Src =" https://i.sstatic.net.net/gwxb3 /> < /p>
Зачем это?>
Подробнее здесь: https://stackoverflow.com/questions/797 ... nt-content
