Границы наведения
Нужно что бы при наведение на слово 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>
|
Сергей Ракипов,
<!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>
|
рони,
То есть, была создана пустая переменная timer что бы положить задержку в 300 миллисекунд, а зачем? как это помогло? Потом функция, которая отслеживает событие, проверяет совпадение с классами .block_inside1, .block_inside2 И зачем то очистили таймату, не понял для чего? Можно хоть в двух словах, почему у меня не работало как нужно а у вас все сработало как нужно. |
Так я кажется не много понял, задержка как то убирает этот дергание, но не могу понять как это работает
|
Сергей Ракипов,
если за 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>
|
Сергей Ракипов,
измените matches на closest и будет вам счастье или добавьте Цитата:
|
рони,
Да все как вы и обещали, счастье случилось ) спасибо |
Цитата:
Сергей Ракипов, решение, работающее на всех устройствах, т. е. готовое для 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,
а на js сможешь? |
| Часовой пояс GMT +3, время: 15:44. |