如何使用Hover并使用Jquery单击

时间:2011-09-12 11:06:54

标签: javascript jquery tooltip

大家好我正在使用hoverclick功能从这里获取工具提示

ToolTips

现在根据我的要求,我想在一个方法中结合hoverclick事件。当hover我不想显示close按钮但是当用户点击我希望显示close按钮时。如何在一个事件中做到这一点可以帮助我,或者如果有任何例子或样品请分享

我在Tooltip

上为Click试了这个
<script type="text/javascript">
  $(document).ready(function() {
     $('#foobar2').click(function() {
      var url = $(this).attr('href');       
      $(this).formBubble({
        url: url,
        dataType: 'html',
        cache: false
      });

      return false;
    });
  });
</script>

我厌倦了这个,但不能工作,你可以编辑吗

 <script type="text/javascript">
  $(document).ready(function() {
  $('#foobar2').bind('mouseover click',function(e) {
    if(e.Type=='click')
    {
    var url = $(this).attr('href');

      $(this).formBubble({
        url: url,
        dataType: 'html',
        cache: false
      });

      return false;
    }


      if(e.Type=='mouseover')
      {
      var url = $(this).attr('href');

      $(this).formBubble({
      closebutton:false;
        url: url,
        dataType: 'html',
        cache: false
      });
      $.fn.formBubble.text('hover hover hover hover');
    }, function() { //mouse out
      var thisBubble = $.fn.formBubble.bubbleObject;

      $.fn.formBubble.close(thisBubble);
    });
      }   

    });});
</script>

嗨我试过这个但没有用

 if(e.type=='mouseout')
{
var url = $(this).attr('href'); 
$(this).formBubble.hide()
}

1 个答案:

答案 0 :(得分:3)

而不是绑定:.click(function(){ ... })

绑定:.bind('mouseover click',function(e){ ... })

然后在函数内部使用:e.type这将是一个确定触发了什么事件类型的字符串

<script type="text/javascript">
  $(document).ready(function() {
     $('#foobar2').bind('mouseover click',function(e) {

      if(e.type == 'click'){
        // do some click event stuff
        var close = true 
      } else {
        // do some hover event stuff
        var close = false 
      }

      var url = $(this).attr('href');       
      $(this).formBubble({
        url: url,
        dataType: 'html',
        cache: false,
        closeButton: close
      });

      return false;
    });
  });
</script>