Как игнорировать Onmouseover в JavaScript на Div с абсолютной позицией - PullRequest
Новая
       11

Как игнорировать Onmouseover в JavaScript на Div с абсолютной позицией

3 голосов
/ 08 февраля 2010

У меня есть следующий код: 

<body>
  <div id="div1" style="position: absolute;"></div>
  <div id="div2" onmouseover="not handling"></div>
</body>

div1 охватывает div2. Мне нужно обработать onmouseover на div2. Я предполагаю, что div1 обрабатывает событие onmouseover и откладывает его до тела (потому что тело является родительским элементом). Я не могу изменить div1 на «ребенка» div2. Есть идеи? ТНХ

РЕДАКТИРОВАТЬ: div1 является полупрозрачным и должен быть всегда видимым, и div2 заполнен цветом (не прозрачный). Div2 также всегда видим, потому что div1 полупрозрачен. Я не могу иметь div1 внутри div2.

Ответы [ 5 ]

1 голос
/ 08 февраля 2010

Элемент, который является самым высоким в порядке размещения (max z-index), получит событие onmouseover.

Чтобы достичь желаемого эффекта, оберните div2 в другой div с самым высоким z-индексом, дайте div2 более низкий z-индекс, чем ваш оверлей.

Так как div3 имеет ту же ограничивающую рамку, что и div2, мы присоединяем к нему событие onmouseover, и обработчик событий действует на div2. 

<body>
    <div id="div1" style="position: absolute; z-index: 10; left:0; top; 0; width: 100%; height: 100%; opacity: 0.25; background-color: black;"></div>
    <div id="div3" style="z-index: 20; position: relative;">
    <div id="div2" style="z-index: 0; position: relative;">
        </div>
    </div>
</body>
0 голосов
/ 13 октября 2016

Забудьте о z-index, потому что вы хотите, чтобы div1 отображался, а не позади div2.

Попробуйте использовать указатель-события: нет на div1, поскольку вы не хотите, чтобы это влияло на событие onmouseover. 

<body>
<div id="div1" style="position: absolute; pointer-events:none"></div>
<div id="div2"></div>
</body>
0 голосов
/ 08 февраля 2010

Путем добавления z-индекса к элементам div, чтобы z-индекс div2 был больше, чем z-индекс div1

, например 

<body>
  <div id="div1" style="position: absolute; z-index: -1"></div>
  <div id="div2" style="position: relative; z-index: 1000" onmouseover="alert('mousemove')"></div>
</body>

z-index определяет порядок стека элемента (и он также может быть отрицательным).

0 голосов
/ 08 февраля 2010

Два предложения, чтобы попробовать, не зная ничего о вашем CSS или макете страницы:

  • Измените Z-индекс div2 на выше чем div1
  • Поместите div2 первым в Порядок тегов
0 голосов
/ 08 февраля 2010

Проблема в том, что вы не можете щелкнуть (или навести курсор мыши) до деления. Поэтому, когда div1 «выше» div2, у вас есть проблема.

Разве нельзя использовать абсолютное / относительное позиционирование для div1 и div2 и использовать больший z-индекс для div2, чем для div1?

...