Question

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

我有两个类“.txt”和“.placeholder”，但我将这个类用于多个文本框。我需要在mouseover事件上执行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();
})

演示：Fiddle

正如lee_mcmullen建议传递给'div.placeholder'的选择器prev是可选的。

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

演示：Fiddle

Answer 2

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

具有类似类的占位符的jquery

2 个答案: