0

我正在尝试使用 jquery 和 css 来实现占位符。

我有 2 个类“.txt”和“.placeholder”，但我将这个类用于多个文本框。我需要鼠标悬停事件上的 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/

提前致谢。

4

2 回答 2

3

您可以使用.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();
})

演示：小提琴

于 2013-03-19T11:43:23.280 回答
0 
$('.txt').hover(function(){
  $(this).prev().hide();
},
function(){
  $(this).prev().show();
})
于 2013-03-19T11:44:13.773 回答