Для приведенных ниже решений допустим, что у нас есть элемент шириной 400 пикселей и высотой 300 пикселей.
<div class="element"></div>
.element {
height: 300px;
width: 400px;
background: #333;
}
Решение 1: только с CSS
Решая приведенный вами пример, мы должны заключить div в элемент контейнера с двумя интервалами перед div в качестве вспомогательных элементов.
<div class="container">
<span class="left-top-20"></span>
<span class="right-bottom-20"></span>
<div class="element"></div>
</div>
Затем мы размещаем элементы <span> в углах. Для этого мы устанавливаем position: relative для контейнера и position: absolute для свойств span и top, right, bottom и left.
Наконец, наведение диапазонов повлияет на стиль .element с использованием общего селектора братьев и сестер ~;
.container {
display: inline-block;
position: relative;
}
.container span {
width: 20%;
height: 20%;
position: absolute;
}
.left-top-20 {
left: 0;
top: 0;
}
.right-bottom-20 {
right: 0;
bottom: 0;
}
.left-top-20:hover ~ .element {
background-color: red;
}
.right-bottom-20:hover ~ .element {
background-color: green;
}
.element {
height: 300px;
width: 400px;
background: #333;
}
Недостатком этого является то, что промежутки будут находиться перед элементом div, поэтому они будут предотвращать любое взаимодействие с тем, что находится внизу, например выделение текста или нажатие любой кнопки.
Решение 2: с JavaScript
Для этого решения вам не нужны контейнер или вспомогательные элементы. Сначала вы добавляете прослушиватель для наведения элемента, прослушиватель событий mousemove. Каждый раз, когда мышь перемещается внутри элемента, его высота и ширина будут сохраняться, а также положение мыши внутри него.
Наконец, будет выполнено условие и вычисление, чтобы проверить, находится ли позиция там, где вы этого хотите. быть добавлением классов для стилизации div или их удалением.
.element {
height: 300px;
width: 400px;
background: #333;
}
.red {
background: red;
}
.green {
background: green;
}
document.querySelector('.element').addEventListener('mousemove', function(e) {
var elementWidth = this.offsetWidth;
var elementHeight = this.offsetHeight;
var positionHorizontal = e.offsetX;
var positionVertical = e.offsetY;
if (positionHorizontal <= elementWidth * 0.2 && positionVertical <= elementHeight * 0.2) {
this.classList.add('red');
} else if (positionHorizontal >= (elementWidth - (elementWidth * 0.2)) && positionVertical >= (elementHeight - (elementHeight * 0.2))) {
this.classList.add('green');
} else {
this.classList.remove('red', 'green');
}
});
Другой слушатель событий также необходим для проверки, покинула ли мышь элемент. Это для ситуаций, когда мышь находилась в одном из углов перед уходом, поэтому стиль будет удален. В противном случае стиль будет применяться даже при отсутствии мыши.
document.querySelector('.element').addEventListener('mouseleave', function(e) {
this.classList.remove('red', 'green');
});
Недостатком этого подхода является то, что он имеет худшую производительность, чем первое решение.