输入 CSS 悬停状态之前的 HTML 标签

Question

我有一个表单，我把标签放在这样的输入之前:

<label for="email">Confirm Email</label>
<input type="text" id="email" />
<label for="firstname">First Name</label>
<input type="text" id="firstname" />
<label for="lastname">Last Name</label>
<input type="text" id="lastname" />
<label for="company">Company</label>
<input type="text" id="company" />

当我尝试使用 CSS 设置标签样式时，当我像这样悬停输入时 (input:hover + label)，CSS 应用于下一个标签，而不是应用于具有for= 属性。例如，如果我尝试将鼠标悬停在电子邮件输入上，它将对第二个带有 for="firstname" 的标签应用 input:hover+label 效果。

我的设计结构在顶部有标签，在它们下面有输入，所以我无法切换它们的位置。

有什么解决办法吗？

Answer 1

使用一些巧妙的 CSS，您可以在输入后添加标签，但仍然让标签看起来像是在输入的顶部 http://jsfiddle.net/8YqN2/2/

<input type="text" id="email" />
<label for="email">Confirm Email</label>    
<input type="text" id="firstname" />
<label for="firstname">First Name</label>    
<input type="text" id="lastname" />
<label for="lastname">Last Name</label>    
<input type="text" id="company" /> 
<label for="company">Company</label>

CSS

input:hover + label  {
  background-color: #eee;
}

input {
  position: relative;
  display: block;
  margin-top: 1.5em;
}

label {
  display: block;
  position: relative;
  top: -2.5em;
}

我认为单独使用 CSS 是不可能的 ，如果您可以忍受启用 JS 的用户的效果，则可以使用以下内容。 http://jsfiddle.net/8YqN2/1/

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

label.hover  {
  background-color: #eee;
} ​