Mouseover/MouseOut jquery

Mouseover/MouseOut jquery

本文关键字：jquery MouseOut Mouseover      更新时间：2023-09-26

我意识到这个问题应该是多么简单的回答，但我在药物迷雾中，答案是我逃跑了。

我想把它变成一个简单的函数，如果文本框的值在鼠标离开时为空，则显示特定的文本，并在鼠标悬停时清空文本值。

我现在有什么可以工作，但非常丑陋:

$(".disappearOnClick").live('mouseover',function() {    
            if($(this).val() === 'BFA Offset') {
                $(this).val('')
            }
        });
    $(".disappearOnClick").live('mouseout',function() {
            if($(this).val() === '') {
                $(this).val('BFA Offset')
            }
        });

您可以使用live()方法绑定多个事件-因此您可以使用像这样的内容->

$('.disappearOnClick').live('mouseover mouseout', function(event) {
  if (event.type == 'mouseover') {
     if($(this).val() === 'BFA Offset') {
            $(this).val('');
        }
  } else {
    if($(this).val() === '') {
            $(this).val('BFA Offset');
        }
  }
});

$(".disappearOnClick").mouseover(function(){...});

和

$(".disappearOnClick").mouseout(function(){...});

也可以。

您应该使用hover:

$(".disappearOnClick").hover(
    function(){
        //mouseover
    },
    function(){
        //mouseout
    }
);

您可以尝试这样做(当然您可以将焦点/模糊事件更改为鼠标事件):

http://jsfiddle.net/BD7JA/2/

// <input value="BFA Offset" data-placeholder="BFA Offset" class="is-placeholder" />
$('[data-placeholder]').on({
  focus: function (evt) {
    if ($(this).hasClass('is-placeholder')) {
      $(this).val('');
      $(this).removeClass('is-placeholder');
    }
  },
  blur: function (evt) {
    if ($(this).val() === '') {
      $(this).val($(this).data('placeholder'));
      $(this).addClass('is-placeholder');
    }
  }
});

试试这个:

$(".disappearOnClick").mouseenter( function (this) {
    if ($('#'+this.id).val() == 'BFA Offset') 
        $('#'+this.id).val('')
}).mouseleave( function (this) {
    if ($('#'+this.id).val() == '') 
        $('#'+this.id).val('BFA Offset')
});
相关文章：