在悬停时隐藏输入标签(&W)

Question

我创建了一个表单字段，如下所示：

<p>
<label for="your-name" style="display: block; ">Your name</label>
<span>
<input type="text" name="your-name" value="" class="" size="40">
</span>
</p>

此代码无法更改。我已经将标签绝对放置在字段上，当我将鼠标悬停在字段上时，我已经应用了jQuery来隐藏它，如下所示：

jQuery('form p').hover(
   function() {
        jQuery(this).find("label").hide();
   },
   function() {
        jQuery(this).find("label").show();    
    }
);

然而，这只在鼠标悬停在字段上时才起作用。有没有一种方法可以隐藏标签，如果在字段中输入并悬停？

谢谢，罗伯特

Answer 1

这是一种相当混乱的方式..这就是我要做的：

HTML：

<input type="text" name="your-name" id="your_name" value="Your Name" class="" size="40">

jQuery：

$('#your_name').focus(function(){
  if ($(this).val() == 'Your Name'){
      $(this).val('');
  }
}).blur(function(){
  if ($(this).val() == ''){
      $(this).val('Your Name');
  }
});

或者像james提到的那样使用占位符

Answer 2

如果你想使用现有的方法，你可以这样做：

演示：http://jsfiddle.net/SLjMn/