эффект наведения и функция в jquery - PullRequest
Новая
       2

эффект наведения и функция в jquery

0 голосов
/ 10 декабря 2010

У меня есть цель <div class="outter"> и еще одна <div class="inner"> в качестве всплывающей подсказки, 

<div class="outter"></div>
<div class="inner"></div>

по умолчанию подсказка невидима, когда при наведении курсора мыши на "ауттер" появляется "внутренний"в «внешнем», пока мышь не выберет «наружный», «внутренний» исчезнет. 

$(".outter").hover(function(){
   var $top=$(".outter").offset().top;
   var $left=$(".outter").offset().left;

   $('.inner').css({'top':$top+10+'px','left':$left+10+'px'}).show();
},function(){
    $('.inner').hide();
})

, но когда мышь еще не вышла из «внешнего», в то же время мышьна «внутреннем» на «внешнем», возникла проблема: внутренний мигнул, не стабильно

онлайн-дело здесь

Итакчто не так с корпусом?

Я хочу, чтобы внутренний был стабильным, а не прошитым. Пожалуйста, помогите, спасибо:)

Ответы [ 2 ]

2 голосов
/ 10 декабря 2010

Если это вариант, самое простое решение - использовать ваши элементы так, как они названы: 

<div class="outter">
  <div class="inner"></div>
</div>

... тогда ваш текущий код работает нормально, поскольку mouseleave не будет срабатывать при вводе элемента .inner, так как это дочерний элемент. Вы можете проверить это здесь .

0 голосов
/ 10 декабря 2010

Возможно, это не идеальное решение, но попробуйте это 

$(".outter, .inner").hover(function(){
   var $top=$(".outter").offset().top;
   var $left=$(".outter").offset().left;

   $('.inner').css({'top':$top+10+'px','left':$left+10+'px'}).show();
},function(){
    $('.inner').hide();
})

updated demo

...