Игнорировать события мыши для перекрывающихся элементов div

Question

Страница имеет 4 деления:

1. Элемент A
2. Элемент B
3. Элемент C
4. Детали (скрыто)

Желаемый эффект заключается в том, что поле «Подробности» будет отображаться при наведении курсора на поле «Элемент» и будет скрыто после его наложения. Поле «Подробности» будет перекрываться примерно с 20% правее поля «Элемент» при его отображении.

Тем не менее, текущий ошибочный эффект, который я получаю, заключается в том, что, когда я наводю курсор мыши на правый край любого из полей «Элемент», он входит в бесконечный цикл отображения и скрытия поля «Детали». Предположительно, это происходит потому, что он вызывает событие mouseout в поле Item (когда отображаются детали), но сразу же вызывает событие mouseover, когда поле Details скрыто. Я хотел бы знать, как обойти это.

Мой текущий код:

$('div.item').hover(
    function() {
        $(this).showDetails();
    },
    function() {
        $(this).hideDetails();
    }
);

Заранее спасибо за любые указатели! Вот ссылка jsfiddle для тех, кто не может ее визуализировать. Попробуйте навести курсор мыши на поля «Предметы» с правой стороны и немного подвинуть мышь, и вы увидите мерцание.

http://jsfiddle.net/s6CjP/1

Ксавье, я уже пробовал appendTo для поля подробностей, но эффект, который я хочу получить, заключается в том, что я хочу, чтобы события мыши были нацелены только на действующий элемент div (а именно Item). После некоторого исследования я даже вполне уверен, возможно ли это, поскольку поле «Подробности» закрывает элемент div (и, следовательно, не может прикрепить событие к чему-то под ним)

Answer 1

Один из обходных путей - указать, что DIV будет дочерним элементом элемента, над которым вы наводите курсор.Таким образом, указатель все еще находится «в» правильном элементе, когда он находится над подробным DIV, и указатель мыши не отправляется до тех пор, пока мышь не оставит оба DIV.Вы можете сделать это, по крайней мере, двумя способами:

1. Иметь отдельную информацию DIV для каждого элемента DIV (они все равно будут иметь разные детали, верно?).
2. Вытащить деталиDIV из DOM и добавьте его к нужному элементу DIV в вашей функции showDetails ().

Вам нужно будет сделать несколько хитростей CSS, чтобы он отображался так, как вы хотите, но так долгопоскольку существуют отношения родитель-ребенок, вам не нужно беспокоиться о ошибочных событиях мыши.

Надеюсь, это поможет!

Answer 2

Нандо, там есть несколько лучших ответов, но я просто хочу высказать это, хотя я уверен, что вы попробовали это.

Тем более, что вы используете hover (), это звучит немного похоже на то, что вы столкнулись с очень простой проблемой.

Я уверен, что вы пытались остановить (правда, правда)право?

//
$('div.item').hover(
    function() {
        $(this).stop(true, true).showDetails();
    },
    function() {
        $(this).stop(true, true).hideDetails();
    }
);
//

Answer 3

Попробуйте это:

Я думаю, это то, что вы ищете:

HTML:

<div class="divItem" style="width:50px;height:50px;background-color:#FFEFC6">Item A</div>
<br />
<div class="divItem" style="width:50px;height:50px;background-color:#FFEFC6">Item B</div>
<br />
<div class="divItem" style="width:50px;height:50px;background-color:#FFEFC6">Item C</div>
<div id="divMove" style="width:100px;height:100px;background-color:#D9E9D0;display:none">
</div>

JAVASCRIPT:

$(".divItem").mousemove(function(e){
    var left  = e.pageX + 10 + "px";
    var top  = e.pageY + 20 + "px";

    $("#divMove").show().css("top",top).css("left",left).css("position","absolute");
}).mouseout(function(){
    $("#divMove").hide();
   }).mouseenter(function(){
        $("#divMove").text($(this).text());    
});

НАЖМИТЕ ЗДЕСЬ, ЧТОБЫ ВИДЕТЬ ОБРАЗЕЦ

Answer 4

У меня проблемы с визуализацией вашей проблемы.Непонятно, выглядит ли окно сведений во всех случаях одинаково и где находятся элементы div на странице и по отношению друг к другу.

Пожалуйста, вы можете создать для нее JSFiddle ивставьте туда немного CSS, HTML и JS.Тогда я могу взглянуть.