Mouseover / MouseOut jquery

Question

我意识到这个问题应该回答多么简单，但我处于药物迷雾状态，答案正在逃避。

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

我现在所拥有的但是非常难看：

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

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

Answer 1

您可以使用live()方法绑定到多个事件 - 因此您可以使用类似的内容 - ＆gt;

$('.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');
        }
  }
});

Answer 2

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

和

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

同样有效。

Answer 3

您应该使用hover代替：

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

Answer 4

您可以尝试这样的事情（您当然可以将焦点/模糊事件更改为鼠标事件）：

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');
    }
  }
});

Answer 5

试试这个：

$(".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')
});