jquery: вложенные теги и hover () не работают в IE - PullRequest
Новая
       61

jquery: вложенные теги и hover () не работают в IE

3 голосов
/ 08 октября 2009

У меня есть такая конструкция: 

<div id="container">

<span>
   <span></span>
</span>

<span>
   <span></span>
</span>

</div>

мне нужно перехватить событие mouseout контейнера, поэтому я сделал jquery так: 

$("#container").hover('',function(){ 
alert("Out"); 
});

В Firefox / Opera, функция выхода из мыши срабатывает только при выходе из div (как я этого хочу).

В IE он запускает mouseout-функцию при каждом * -Tag внутри div, когда мышь нажимает. (* возможно, важно, чтобы теги span имели также события mouseover и out)

У кого-нибудь есть идеи, как это решить? (Вложенная структура не может быть изменена из-за сложной компоновки)

thx4 любые идеи!

Ответы [ 7 ]

5 голосов
/ 08 октября 2009

@ evelio: не работало, идентификатор всегда был "контейнером"

как я решил (пока ...):

Верьте или нет, атрибут background-color контейнера-div должен быть установлен в цвете. Я все еще в шоке от этого факта, но я пробовал это несколько раз, и это единственный атрибут background-color в CSS, который заставляет его работать или нет.

и: цвет # 000000 не работает, любой другой цвет, включая «белый»

1 голос
/ 12 марта 2012

Способ, который вы можете решить, это добавить 1px прозрачный png в качестве фона.

См .: IE8: наведение Div работает только при заданном цвете фона, очень странно, почему?

1 голос
/ 21 марта 2011

попробуйте 

$("#container").mouseleave(function(){ 
alert("Out"); 
});

Что касается IE, бойкотируйте дерьмовый браузер и ведите блоги о его полной безнадежности, пока ваши пальцы не оцепенят. Этот браузер отвечает за то, что время веб-дизайнеров стоит примерно на 33% меньше, чем должно быть. Просто убей его, как сможешь.

1 голос
/ 14 октября 2009 
 $("#container").hover('',function(ev){

      alert("Out");
      if( ev.stopPropagation ) { ev.stopPropagation(); } //For 'Good' browsers
      else { ev.cancelBubble = true; } //For IE

 });

также читайте: Событие всплытия и захвата

0 голосов
/ 21 мая 2010

У меня была похожая проблема в IE 6, 7 и 8. Mafka прав, цвет фона должен быть установлен, чтобы он работал. Если невозможно установить цвет фона для вашего «контейнера», вы все равно можете установить цвет фона на белый и установить непрозрачность на 0.

Я сделал это с помощью следующего кода JavaScript до привязки события наведения мыши в jQuery: 

if ($.browser.msie) {
    $("#container").css({
        background: '#fff',
        opacity: 0
    });
}
0 голосов
/ 08 октября 2009

Вы пробовали: 

$("#container").hover('',function(){ 
    alert("Out"); 
    return false;
});

или 

$("#container").hover('',function(e){ 
    if($(e.target).is("#container")){
        alert("Out"); 
        return false;
    }
});

или еще лучше: 

$("#container").mouseout(function(e){ 
    if($(e.target).is("#container")){
        alert("Out"); 
        return false;
    }
});

Если вам нужна только указатель мыши, нет необходимости использовать функцию наведения.

0 голосов
/ 08 октября 2009

Mhhh У меня нет IE рядом, но вы можете попробовать jQuery mouseout demos (и hover demos), если он работает нормально, кажется, проблема с вашим кодом в какой-то другой строке ... наконец Вы можете работать с ним: 

$("#container").hover('',function()
{
    //Are you sure?
    if($(this).attr('id') == 'container')
    {
        alert('yup this is container');
    }
});
...