jquery悬停在对话框上

Question

<div id="view"></div>
<div class="bar" style="padding:0px;" id="bar">
    <script>
       var bar = '<img class="myclass" src="button.png" >&nbsp&nbsp' ;
       $view = jQuery('#view') ;
       $view.dialog({ 
          height: 650, 
          width: 650, 
          buttons: { "welcome" :        
             function() { msg() ; } 
          },
          open: function(event, ui) 
           { if (full_toggle == 1) 
             {             
                $bar.dialog('open') ;
             } 
            }
          }) ;
        bar = $(".bar", "#view").dialog({ 
                 height: 30, 
                 width: '100%',
                 textAlign : "justify",  
                 marginLeft : "auto",
                 marginRight:"auto"
         })
    </script>
</div>

在上面的脚本中，因为 bar 是一个对话框，我如何在 bar 上执行悬停或鼠标悬停属性

Answer 1

这个怎么样：

 $('.myclass').mouseover(function(){
   // whatever....
 });

或者

 $('.myclass').hover(function(){
   // whatever....
 });

Answer 2

您无需将 javascript 代码与 HTML 混合使用。你可以把它放在$(function(){});里面的HEAD部分，就像下面的代码一样。

$(function(){
     $('.bar').hover(
        function(){ alert('Hover!'); },
        function(){ alert('Hover Out!'); }
     );
});

---

在看到您更新了有关对话框的问题后：

jQuery UI 对话框渲染一些 html。我建议您插入要悬停的 html。

例如：

$('.ui-dialog').live('hover', function(){ alert('Hover!'); } );

你也可以使用：

$view.dialog({
       open: function(){ 
            $('.ui-dialog').hover( function(){ alert('Hover!'); } });
       }
});

查看here 以获取更多资源。

Answer 3

 $('#bar').hover(function(){ 
        alert('I was hovered...'); 
        //function code here...
    },
    function(){ 
        alert('No longer hovered...'); 
        //function code here...
    }
 });

我还建议稍微修改您的代码...如果您将所有 HTML 元素（例如图像）放入其中，然后在页面底部放置您的文档就绪 jQuery 代码以初始化所有其他项目，如对话等。将 JavaScript 放在页面底部将缩短加载时间。