0

我有一个表格，我在输入之前放置了标签，如下所示：

<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=属性的标签。例如，如果我尝试悬停电子邮件输入，它将input:hover+label在第二个标签上应用效果for="firstname"。

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

有什么解决办法吗？

4

3 回答 3

3

使用一些巧妙的 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;
} ​

​</p>

于 2012-05-02T06:00:54.423 回答
2

你这样做是错的。“+”号是一个“相邻兄弟选择器”。

选择器匹配一个元素，该元素是第一个元素的下一个兄弟元素。

在您的情况下，选择器与.label的下一个兄弟元素匹配input:hover。

CSS 不关心for属性，它关心id,class和元素的层次结构。

你还没有提到你想要完成什么，但试一试：

HTML

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

CSS

label:hover { /* something */ }

<span>如果需要，将“标签”文本包装在标签中。

于 2012-05-02T05:41:03.013 回答
-1

我希望这有帮助

<div class="nina">
    <label for="email" id="em">Confirm Email</label>
    <input type="text" id="email" onmouseover="document.getElementById('em').style.color='red'" onmouseout="document.getElementById('em').style.color='black'" />
    <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" />

</div>

这个没有jquery

于 2012-05-02T06:07:50.043 回答