Нужно что бы при наведение на слово test выпадал блок и отсталася на месте когда курсор на нем и на зоне которая выпала, пропадал когда курсор ушел.
В первом случае зона наведения она снизу больше (я понимаю почему из за размера блока) и соответственно срабатывает не так как задумано.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.block{
height: 100%;
}
.block_inside1{
cursor: pointer;
}
.block_inside2{
position: relative;
width: 50px;
transform:translateY(-250px);
transition: transform .5s;
z-index: 2;
background-color: #e2e2e2;
}
</style>
</head>
<body>
<div class="block">
<div class="block_inside1">test</div>
<div class="block_inside2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, maiores!</div>
</div>
<script>
const block = document.querySelector(".block");
const block_inside1 = document.querySelector(".block_inside1");
const block_inside2 = document.querySelector(".block_inside2");
function subHover_1(){
block.onmouseover = subDown;
block.onmouseout= subUp;
function subDown(){
block_inside2.style.transform = "translateY("+"20"+"px)";
}
function subUp(){
block_inside2.style.transform = "translateY("+"-250"+"px)";
}
}
subHover_1();
</script>
</body>
</html>
Во втором случае происходит не большое дергание если медленно сдвигаешь курсор из одной зоны в другую, примерно понимаю из за чего, но тоже проблему не могу решить
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.block{
height: 100%;
}
.block_inside1{
cursor: pointer;
}
.block_inside2{
position: relative;
width: 50px;
transform:translateY(-250px);
transition: transform .5s;
z-index: 2;
background-color: #e2e2e2;
}
</style>
</head>
<body>
<div class="block">
<div class="block_inside1">test</div>
<div class="block_inside2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, maiores!</div>
</div>
<script>
const block = document.querySelector(".block");
const block_inside1 = document.querySelector(".block_inside1");
const block_inside2 = document.querySelector(".block_inside2");
function subHover_1(){
block_inside1.onmouseover = subDown;
block_inside1.onmouseout= subUp;
block_inside2.onmouseover = subDown;
block_inside2.onmouseout= subUp;
function subDown(){
block_inside2.style.transform = "translateY("+"20"+"px)";
}
function subUp(){
block_inside2.style.transform = "translateY("+"-250"+"px)";
}
}
subHover_1();
</script>
</body>
</html>