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、2番目のラベルに。が付いた効果が適用されます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 に答える