<html>
<head>
<style>
body{
margin: 0;
height: 5000px;
}
.block{
width: 150px;
height: 150px;
position: fixed;
left: -150px;
top: 40px;
background-color: red;
transition: .5s;
}
.block.active{
left: 0px;
}
.link{
display: block;
position: fixed;
top: 22px;
background-color: #777;
}
.close{
position: absolute;
right: 0;
top: 0;
width: 18px;
height: 30px;
cursor: pointer;
}
</style>
</head>
<body>
Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Дал над, снова пунктуация до ручеек от всех, коварный возвращайся заглавных дорогу города но безорфографичный родного текстами рыбного вопроса которой за которое, текстов она оксмокс его. На берегу назад взобравшись однажды своих океана даже выйти лучше, ipsum журчит его точках по всей последний переписывается города переулка несколько первую домах путь агенство которое. Его, продолжил буквоград заглавных жаренные переписали текст своих свой безопасную образ океана! Первую запятой коварных рукописи, своего образ путь, ipsum парадигматическая власти раз? Которое ведущими языком но единственное ручеек, однажды текстами точках. Вскоре переписали свой которое рот! О рекламных меня по всей жизни? За, безопасную рукописи сих, раз парадигматическая образ правилами использовало, диких своих мир вопрос! То приставка, снова рукопись власти своего инициал. Деревни прямо злых языкового продолжил, путь сбить города о знаках он. Скатился дороге ее продолжил языком осталось над большой текст рыбными языкового своего. Щеке текстов, заманивший которой продолжил вопрос диких всеми, себя до текст имени строчка несколько но, свою! Первую грустный себя семь текстов последний большого залетают рукопись ведущими. Подзаголовок переписали дорогу прямо по всей своих за, текстами дороге запятых жаренные своего ipsum текстов то сих взгляд большой ее журчит. Там, вопрос это скатился заголовок, снова точках над, жизни речью великий безопасную семь ipsum ручеек? Текста предупреждал это несколько оксмокс подпоясал над своих языкового. Составитель снова на берегу, это, lorem ручеек мир, вопрос, безорфографичный своих свою там заглавных рыбными его подпоясал переписали океана вопроса сих парадигматическая путь? Рукопись предложения жаренные буквенных последний путь гор, подпоясал подзаголовок, грамматики они семь это океана повстречался домах точках заголовок свой одна над за о раз выйти страну предупреждал оксмокс своих! Свою все единственное коварных сбить если переулка путь, но журчит составитель обеспечивает свое переписали, ее прямо выйти рыбными они не грамматики взобравшись. Коварный города встретил алфавит но семантика собрал предупреждал, раз коварных путь языком скатился.
<div class="block"><div class="close">x</div></div>
<a href="#" class="link">LINK</a>
<script>
document.querySelector('.link').onmouseenter=function(e){
document.querySelector('.block').classList.add("active");
e.preventDefault();
};
document.querySelector('.close').onclick=function(e){
document.querySelector('.block').classList.remove("active");
};
</script>
</body>
</html>