Проблема Javascript - div внутри div

#javascript #html

#javascript #HTML

Вопрос:

Мне нужно, чтобы hideall() функция выполнялась при перемещении мыши из id1 . С помощью приведенного ниже кода он вызывает hideall() правильно, но он вызывает его снова, когда мышь выходит из id2 .

 <div id="id1" onmouseout="hideall();" style="border:1px solid red;">
          <div id="id2">This is inside id1 div</div>
</div>

http://i.stack.imgur.com/hrfsM.png

1. Я думаю, что событие mouseout происходит только при перемещении мыши откуда-то куда-то. Если я правильно понимаю, hideall() в вашем коде должен вызываться, когда мышь находится в id1 и перемещается за пределы id1. Вы утверждаете, что hideall () также неправильно запускается при перемещении мыши с id1 (но не id2)-> id2? Или когда он перемещается из id2-> outside_id2?

2. Когда я перемещаю мышь из id1> id2 и из id1> body, затем вызываю функцию hideall (). Мне нужно, чтобы функция hideall () вызывалась только в том случае, если id1> body, а НЕ id1> id2

3. Я видел проблему, очень похожую на эту: jsfiddle.net/userdude/gsv7n/1

Ответ №1:

В Internet Explorer есть проприетарное событие под названием mouse leave, которое, я полагаю, является именно тем, что вы ищете. К сожалению, это будет работать не во всех браузерах. Я рекомендую вам использовать библиотеку javascript, такую как jQuery. В него встроено событие. Смотрите http://api.jquery.com/mouseleave / для получения подробной информации. Итак, вы, вероятно, искали бы что-то вроде этого:

 <div id="id1" style="border:1px solid red;">
      <div id="id2">This is inside id1 div</div>
</div>
<script>
$(document).ready(function() {
    $('#id1').mouseleave(function() {
        hideAll();
        // Or whatever else you want to do when the mouse leaves the element.
    });
});
</script>

Ответ №2:

Адаптация другого ответа, который у меня был ранее:

 <div id="id1" onmouseout="showTarget('id1',0);" onmouseover="showTarget('id1',1);" style="border:1px solid red; width: 150px; height: 100px">
 <div id="id2" onmouseover="showTarget('id1',1);" onmouseout="showTarget('id1',1);" style="background-color: red; color: white; width: 100px; height: 75px;">This is inside id1 div</div>
</div>

function showTarget(target, state) {
    switch (state) {
        case 1:
            state = 'block';
        break;
        default:
            state = 'none';
    }
    console.log(state);
    document.getElementById(target).style.display = state;
}

http://jsfiddle.net/gMpkX/