Форум

Сергей Ракипов · #1 (**permalink**) 19.05.2020, 20:55

Нужно что бы при наведение на слово 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>

рони · #2 (**permalink**) 20.05.2020, 08:01

Сергей Ракипов,

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.block{
    height: 100%;
    background-color: #54CC2C;
    position: relative;
}
.block_inside1{
    cursor: pointer;
    background-color: #CC2ABC;
}
.block_inside2{
    position: relative;
    width: 50px;
    transform:translateY(-250px);
    transition: transform .5s;
    z-index: 2;
    background-color: #e2e2e2;
}
.test{
   width: 50px;
   height: 50px;
   background-color: #2F2FCC;
   left: 50%;
   top: 50%;
   position: absolute;
}

</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 class="test"></div>
</div>
<script>
var block = document.querySelector(".block");
var block_inside1 = document.querySelector(".block_inside1");
var block_inside2 = document.querySelector(".block_inside2");
function subHover_1() {
    var timer;
    block.onmouseover = subDown;
    block.onmouseout = subUp;
    function subDown(event) {
        if (event.target.matches(".block_inside1, .block_inside2")) {
            clearTimeout(timer);
            block_inside2.style.transform = "translateY(" + "20" + "px)";
        }
    }
    function subUp(event) {
        if (event.target.matches(".block_inside1, .block_inside2")) {
            clearTimeout(timer);
            timer = setTimeout(function() {
                block_inside2.style.transform = "translateY(" + "-250" + "px)";
            }, 300);
        }
    }
}
subHover_1();

</script>
</body>
</html>

Сергей Ракипов · #3 (**permalink**) 20.05.2020, 18:35

рони,
То есть, была создана пустая переменная timer что бы положить задержку в 300 миллисекунд, а зачем? как это помогло?

Потом функция, которая отслеживает событие, проверяет совпадение с классами .block_inside1, .block_inside2
И зачем то очистили таймату, не понял для чего?

Можно хоть в двух словах, почему у меня не работало как нужно а у вас все сработало как нужно.

Сергей Ракипов · #4 (**permalink**) 20.05.2020, 18:39

Так я кажется не много понял, задержка как то убирает этот дергание, но не могу понять как это работает

рони · #5 (**permalink**) 20.05.2020, 19:20

Сергей Ракипов,
если за 300 миллисекунд курсор успеет встать с блока .block_inside1 или .block_inside2 на .block_inside1 или .block_inside2 то отключится -250px.

300 миллисекунд - максимальное время для перемещения по пустому пространству между блоками

Сергей Ракипов · #6 (**permalink**) 20.05.2020, 20:01

Сообщение от рони

Сергей Ракипов,
если за 300 миллисекунд курсор успеет встать с блока .block_inside1 или .block_inside2 на .block_inside1 или .block_inside2 то отключится -250px.

300 миллисекунд - максимальное время для перемещения по пустому пространству между блоками

Понял спасибо
А почему когда в это блоке <div class="block_inside2"><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, maiores!</a></div>

Помешена ссылка или два и более блока он уже работает коряво

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.block{
    height: 100%;
    background-color: #54CC2C;
    position: relative;
}
.block_inside1{
    cursor: pointer;
    background-color: #CC2ABC;
}
.block_inside2{
    position: relative;
    width: 50px;
    transform:translateY(-250px);
    transition: transform .5s;
    z-index: 2;
    background-color: #e2e2e2;
}
.test{
   width: 50px;
   height: 50px;
   background-color: #2F2FCC;
   left: 50%;
   top: 50%;
   position: absolute;
}

</style>
</head>

<body>
<div class="block">
    <div class="block_inside1">test</div>
    <div class="block_inside2"><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, maiores!</a></div>
    <div class="test"></div>
</div>
<script>
var block = document.querySelector(".block");
var block_inside1 = document.querySelector(".block_inside1");
var block_inside2 = document.querySelector(".block_inside2");
function subHover_1() {
    var timer;
    block.onmouseover = subDown;
    block.onmouseout = subUp;
    function subDown(event) {
        if (event.target.matches(".block_inside1, .block_inside2")) {
            clearTimeout(timer);
            block_inside2.style.transform = "translateY(" + "20" + "px)";
        }
    }
    function subUp(event) {
        if (event.target.matches(".block_inside1, .block_inside2")) {
            clearTimeout(timer);
            timer = setTimeout(function() {
                block_inside2.style.transform = "translateY(" + "-250" + "px)";
            }, 300);
        }
    }
}
subHover_1();

</script>
</body>
</html>

рони · #7 (**permalink**) 20.05.2020, 20:52

Сергей Ракипов,
измените matches на closest и будет вам счастье или добавьте

Сообщение от Сергей Ракипов

ссылка или два и более блока

в matches

Сергей Ракипов · #8 (**permalink**) 20.05.2020, 21:01

рони,
Да все как вы и обещали, счастье случилось ) спасибо

Malleys · #9 (**permalink**) 21.05.2020, 19:04

Сообщение от Сергей Ракипов

Да все как вы и обещали, счастье случилось ) спасибо

Оно же практически не работает!

Сергей Ракипов, решение, работающее на всех устройствах, т. е. готовое для production...

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<style>
		.block {
			height: 100%;
			background-color: #54CC2C;
			position: relative;
		}
		.block_inside1 {
			cursor: pointer;
			background-color: #CC2ABC;
		}
		.block_inside2 {
			position: relative;
			width: 50px;
			transform: translateY(-250px);
			transition: transform .5s 300ms;
			z-index: 2;
			background-color: #e2e2e2;
		}
		.block_inside1:hover ~ .block_inside2,
		.block_inside1:focus ~ .block_inside2,
		.block_inside2:hover,
		.block_inside2:focus-within {
			transform: translateY(20px);
		}
	</style>
</head>
<body>
	<div class="block">
		<div class="block_inside1" tabindex="0">test</div>
		<div class="block_inside2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, maiores!</div>
	</div>
</body>
</html>

И пожалуйста откажитесь от своей вредной идей, что сайты должны работать только при помощи мышки! (И очевидно только на Windows!)

рони · #10 (**permalink**) 21.05.2020, 19:09

Malleys,
а на js сможешь?

Форум

Справочник

Discord чат

Курсы javascript