jquery - 同様のクラスを持つプレースホルダーのjquery

Question

jqueryとcssを使用してプレースホルダーを実現しようとしています。

「.txt」と「.placeholder」の 2 つのクラスがありますが、このクラスを複数のテキスト ボックスに使用します。マウスオーバーイベントでjqueryアクション（プレースホルダーを非表示）が必要です。

HTML:

 <div class="placeholder">First Name</div>
 <input type="text" class="txt"/>

 <div class="placeholder">Last Name</div>
 <input type="text" class="txt"/>

 <div class="placeholder">City</div>
 <input type="text" class="txt"/>

CSS:

.txt
{
 height:40px;
width:300px;
margin-bottom:20px;
font-size:22px;
}

.placeholder
{
color:#DDD;
float:left;
position:absolute;
font-size:22px;
font-family:'Tahoma';
margin-top:7px;
margin-left:10px;
}

フィドルを見てください：http://jsfiddle.net/39YJZ/2/

前もって感謝します。

Answer 1

これを実現するには、 .hoverを使用できます。

$('.txt').hover(function(){
    $(this).prev('div.placeholder').hide();
}, function(){
    $(this).prev('div.placeholder').show();
})

デモ：フィドル

lee_mcmullenが示唆したように、'div.placeholder'に渡されるセレクターprevはオプションです。

$('.txt').hover(function(){
    $(this).prev().hide();
}, function(){
    $(this).prev().show();
})

デモ：フィドル

Answer 2

$('.txt').hover(function(){
  $(this).prev().hide();
},
function(){
  $(this).prev().show();
})