Форум

korner · #1 (**permalink**) 28.10.2011, 22:53

Я знаю что это уже обсуждалось где то, Но я не знаю как правильно сформировать вопрос.
Как бы так объяснить, представим что есть 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 который не растянут на весь экран, так вот при наведение на него курсора должен применяться класс только к нему.
Вроде объяснил, раньше видел что та подобное но не помню где и как это называется.

trikadin · #2 (**permalink**) 28.10.2011, 23:30

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

trikadin · #3 (**permalink**) 28.10.2011, 23:35

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

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

korner · #4 (**permalink**) 28.10.2011, 23:57

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

trikadin · #5 (**permalink**) 29.10.2011, 00:28

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

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

korner · #6 (**permalink**) 29.10.2011, 00:34

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

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

trikadin · #7 (**permalink**) 29.10.2011, 01:33

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

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

korner · #8 (**permalink**) 29.10.2011, 11:13

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

korner · #9 (**permalink**) 29.10.2011, 15:11

И еше один вопрос

Есть к примеру html код:

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

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

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

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

korner · #10 (**permalink**) 29.10.2011, 17:34

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

Форум

Справочник

Discord чат

Курсы javascript