Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.05.2020, 20:55
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 651

Границы наведения
Нужно что бы при наведение на слово 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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сергей Ракипов,
<!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
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 651

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

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

Можно хоть в двух словах, почему у меня не работало как нужно а у вас все сработало как нужно.
Ответить с цитированием
  #4 (permalink)  
Старый 20.05.2020, 18:39
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 651

Так я кажется не много понял, задержка как то убирает этот дергание, но не могу понять как это работает
Ответить с цитированием
  #5 (permalink)  
Старый 20.05.2020, 19:20
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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

300 миллисекунд - максимальное время для перемещения по пустому пространству между блоками
Ответить с цитированием
  #6 (permalink)  
Старый 20.05.2020, 20:01
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 651

Сообщение от рони Посмотреть сообщение
Сергей Ракипов,
если за 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>

Последний раз редактировалось Сергей Ракипов, 20.05.2020 в 20:15.
Ответить с цитированием
  #7 (permalink)  
Старый 20.05.2020, 20:52
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сергей Ракипов,
измените matches на closest и будет вам счастье или добавьте
Сообщение от Сергей Ракипов
ссылка или два и более блока
в matches
Ответить с цитированием
  #8 (permalink)  
Старый 20.05.2020, 21:01
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 651

рони,
Да все как вы и обещали, счастье случилось ) спасибо
Ответить с цитированием
  #9 (permalink)  
Старый 21.05.2020, 19:04
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Сообщение от Сергей Ракипов
Да все как вы и обещали, счастье случилось ) спасибо
Оно же практически не работает!

Сергей Ракипов, решение, работающее на всех устройствах, т. е. готовое для 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!)

Последний раз редактировалось Malleys, 21.05.2020 в 19:12.
Ответить с цитированием
  #10 (permalink)  
Старый 21.05.2020, 19:09
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Malleys,
а на js сможешь?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как нарисовать все границы в DataTables? izumov jQuery 26 25.02.2020 12:48
При перетаскивании границы блока .Нужно что бы этот блок расширялся и наезжал сверху jei Общие вопросы Javascript 5 14.11.2013 10:24
Как поймать значение до верхней границы докумета? EasterRabbit jQuery 1 06.11.2012 13:05
Не удается скрыть границы фреймов Zhorick Events/DOM/Window 4 29.12.2011 19:49
Границы элемента DIv gosha_kap Общие вопросы Javascript 1 06.07.2009 17:12