1

Задача обнаружить, если мышь пройдет над блоком, который располагается под другим блоком.

Есть 2 блока

.front{
  position: absolute;
  top: 0;
  width: 200px;
    height: 200px;
  opacity: .2;
  background: blue;
}

.back{
  position: absolute;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  background: red;
}
<div class="back"></div>
<div class="front"></div>

Обычный mouseenter, естественно, не сработает:

$('.back').mouseenter(()=>{console.log('+');});

Блок-клон нижнего с z-index не предлагайте, до такого и сам догадался, но это возбудит много лишнего html-кода, чего делать не хочется. Должно быть что-то поумнее...

Конструктор: https://jsfiddle.net/few1h534/1/

4
  • А сколько всего будет блоков? Размер и положение блоков может меняться относительно друг друга или везде размеры заданы строго пикселями? + В таком виде не очевидно, почему нельзя изначально заднему блоку дать больший z-index. Если дело в цвете, полупрозрачный фон всё еще можно натянуть на него через ::after. Commented 7 янв. 2021 в 23:11
  • Я делаю кастомный курсор, через div. Соответственно, он всегда перекрывает основной курсор. А мне нужно определять наводится ли реальный курсор на область под кастомным. А z-index юзать не хочу так как для каждой активной кнопочки-ссолочки нужно будет создавать прозрачный блок над ней с z-index больше, чем у кастомного курсора. Вот так. (Пример дал более общий, чтобы сразу была понятна суть того, что мне нужно без лишнего шума)
    – Organizer
    Commented 8 янв. 2021 в 8:02
  • Может такое подойдет css-tricks.com/using-css-cursors Commented 8 янв. 2021 в 8:07
  • Не:/ Курсор должен быть над контентом и на JS/JQuery
    – Organizer
    Commented 8 янв. 2021 в 8:35

1 ответ 1

2

Можно решить через свойство css pointer-events

$('.back').mouseenter(()=>{console.log('+');});
.front{
  position: absolute;
  top: 0;
  width: 200px;
    height: 200px;
  opacity: .2;
  background: blue;
  pointer-events:none;
}

.back{
  position: absolute;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="back"></div>
<div class="front"></div>

1
  • Огромное спасибо!
    – Organizer
    Commented 8 янв. 2021 в 11:08

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.