表单样式显示焦点

Question

我正在尝试设置表单样式 - 这样标签只会在用户写入信息后显示。

http://jsfiddle.net/8YqN2/200/

悬停变体有效，但不是这个焦点

$('input').focus(
  function(){
    $(this).prev().addClass('focus');
  },
  function(){
    $(this).prev().removeClass('focus');
  }
);

//开始阶段

//进入阶段

Answer 1

以下是如何做到这一点：

struct A { A(int, int) {} };
...
int i = 0;
A a1(i++, i++); // used as the arguments of the constructor; unsequenced
A a2{i++, i++}; // used as the arguments of the constructor; sequenced, within the initializer-list of a braced-init-list

但请考虑用户体验和可访问性：您的用户必须了解您希望他们输入的内容

编辑以一次显示一个标签：

$('label').hide();

$('input').on('keyup', function(e){
  $('label').show();
});

Answer 2

这会有用吗？ （纯css解决方案）（如果你不介意在html中输入后有标签）

.input-container {
  position: relative;
  margin: 40px 0 0;
}
label { 
  display: none;
  position: absolute;
  top: -20px;
}
input:focus + label {
  display: block;
}

<div class="input-container">
  <input placeholder="Name">
  <label>Name</label>
</div>