2010-02-03 3 views
0

Все,JQuery слайдер и Mouseover код

В приведенном ниже коде,

<html> 
<head> 
    <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" /> 
    <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script> 

<script src="http://jqueryui.com/latest/ui/effects.core.js"></script> 
<script src="http://jqueryui.com/latest/ui/effects.slide.js"></script> 
<style type="text/css"> 
    #show { margin: 0px; width: 100px; height: 80px; background: green; border: 1px solid black; position: relative; } 
</style> 
</head> 
<body> 
<div id="details" onmouseover="javascript:tooltip(this);">keyword</div> 
<div id="show" style="display:none;"></div> 
</body> 

<script> 
function tooltip(el) 
{ 
    $("#details").mouseover(function() { 
    $("#show").show("slide", {}, 1000); 
    }); 
} 
</script> 
</html> 

На мыши над ключевыми словами дел. зеленый сетчатый ящик, предположительно, должен быть показан и на мыши. Это достигается.

Благодаря .............

ответ

2

Проблема заключается в том, что код внутри функции наведения мыши никогда не выполняется. Когда наведение мыши даже происходит, jQuery используется для переназначения функции для мыши, в то время как она должна выполняться вместо этого.

Внести следующие изменения:

  • удаление OnMouseOver из деталей DIV:
<div id="details">keyword</div> 
  • Выполнить tooltop функцию при загрузке документа в письменной форме:
<script> 
$(document).ready(function(){ 
{ 
    $("#details").mouseover(function() { 
     $("#show").show("slide", {}, 1000); 
    }); 
} 
</script> 
+0

Спасибо ..................................... ....... – Hulk

2

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

$(function(){ 
    $("#details").mouseover(function(){ 
    $("#show").show(); 
    }); 
}); 

Теперь следующая строка устаревает:

<div id="details" onmouseover="javascript:tooltip(this);"> 

Написав $("#details").mouseover() мы уже объявили эту логику. Теперь нет необходимости размещать его в атрибуте mouseover элемента через HTML. Вы должны быть оставлены:

<div id="details"> 
+0

Спасибо ................................. – Hulk

Смежные вопросы