Javascript-форум - Наведение мыши

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Наведение мыши (https://javascript.ru/forum/jquery/22689-navedenie-myshi.html)

Наведение мыши

Я знаю что это уже обсуждалось где то, Но я не знаю как правильно сформировать вопрос.
Как бы так объяснить, представим что есть body и div, div растянут на весь экран.

<body>
 <div style="position:absolute;left:0;top:0;width:100%;height:100%">
 </div>
</body>

$('body,div').hover(function(){
        $(this).addClass('active')
    },function(){
        $(this).removeClass('active');
    });

Что произойдет, если навести курсор на страницу, то этот класс применяться к body и div, вот и вся загвоздка, такого не должно быть, класс должен применяться только к div, ведь div перекрыл элемент body.

А теперь представим что в body есть еше один div который не растянут на весь экран, так вот при наведение на него курсора должен применяться класс только к нему.
Вроде объяснил, раньше видел что та подобное но не помню где и как это называется.

Вы не учитываете, что ваш див находится внутри body - следовательно, при наведении на него, событие срабатывает и для body. Вариант - останавливать всплытие через event.stopPropagation(). Или, при наведении на body проверять event.target, если он равен body - добавлять класс.

Код поменяется как-то так (надеюсь, ничего не напутал, ибо с jQuery работаю редко):

$('body,div').hover(function(event){
        event.stopPropagation();    
        $(this).addClass('active')
    },function(event){
        event.stopPropagation();
        $(this).removeClass('active');
    });

Не работает, тока стало глючить малеха ))

А, собственно, что мешает снять обработчик с body, если ваш див растянут на весь экран?

Проверьте. В этом примере вы вешаете обработчик на все дивы. А вам нужен только один - присвойте ему id и находите по нему.

Да вот мне нужно на все, как это делает firebug в браузере firefox.
Там есть анализ элемента, когда наводиш курсор на определенный элемент и он подсвечивается в виде тени.

Так вот мне так и нужно сделать, но застрял на этом этапе когда нужно определить на какой именно элемент я навел курсор ))

$('body,div').hover(function(event){
        if (event.target==this)
                $(this).addClass('active')
    },function(event){
        if (event.target==this)
                $(this).removeClass('active');
    });

Попробуй так. Вообще, проблема может быть в том, как ты добавляешь обработчик. Попробуй добавить через bind на mouseover/mouseout.

Ура, работает, сделал через bind, гы а почему так получается )
Ну да ладно, главное что работает.
Спасибо за ответ trikadin, учту на будущие.

И еше один вопрос :)
Есть к примеру html код:

<div class="demo">this is text</div>

Получить содержимое можно так:

alert($('.demo').html())

В результате я получу: this is text
Все правильно, но вот мне теперь нужно получить весь код включая родителя.
Должно быть так: <div class="demo">this is text</div>
Как мне такое реализовать ? :)

Все, разобрался, тема закрыта ))