在文本框焦点上显示框，包装文本框

Question

实际上，向您展示我想要实现的目标并不是试图解释会更容易。

州1：  

领域负责人没有关注。很简单。

州2：

领域负责人得到了关注。 div显示在文本框和文本周围。

显示灰色框并定位它没有问题。问题是文本框显示在框内，但仍保持其当前位置。

当文本框被定位为绝对（尝试z-index）时，内容正在被搞乱。

我正在使用jQuery。

任何想法？

Answer 1

您无需为文本框指定绝对位置。只需给它位置：relative并设置zIndex，使其位于灰色框的顶部。如果它有位置：静态（默认）zIndex将不起作用。

Answer 2

你看过jQuery Tools Expose吗？

---

以下是使用鼠标悬停的Expose的一些代码...我还在此pastebin

发布了一个示例

$(function() {
 $("#test").hover(
  function() {
   $(this).expose({api: true}).load()
  }, function() {
   $(this).expose().close();
 });
});

---

编辑：对不起，这是关注焦点和代码的代码。模糊：

$(function() {
 $("#test")
  .focus(function() {
   $(this).expose({api: true}).load();
  })
  .blur(function() {
   $(this).expose().close();
  });
});

---

编辑＃3：仅仅因为我有OCD并且不能让LOL挂起......我制作了一个脚本，可以在不使用Expose的情况下执行您想要的操作（也可以在this pastebin发布）。如果需要，您可以添加淡入和淡出。

CSS

input, select { width: 200px; }
#expose {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: #444;
 z-index: 99;
}
.focused {
 position: relative;
 top: 0;
 left: 0;
 z-index: 100;
}
label.focused {
 color: #ddd;
}

HTML（我试图模仿你的图像）

<fieldset><legend>Fields</legend>
<label for="frespon">Responsibilites:</label><br/>
<input type="text" id="frespon" class="expose" /><br/>
<br/>

<label for="fprojectid">ProjectID:</label><br/>
<select id="fprojectid" class="expose">
 <option value='-'>-</option>
</select><br/>
<br/>

<label for="fstatusid">StatusID:</label><br/>
<select id="fstatusid" class="expose">
 <option value='-'>-</option>
</select><br/>
<br/>

<label for="ftypeid">TypeID:</label><br/>
<select id="ftypeid" class="expose">
 <option value='-'>-</option>
</select><br/>
<br/>

<label for="ftitle">Title:</label><br/>
<input type="text" id="ftitle" class="expose" /><br/>
</fieldset>

脚本

$(document).ready(function(){
 $('.expose').focus(function(){
  $('<div></div>')
   .attr('id','expose')
   .appendTo('body');
  $(this).addClass('focused')
   .parent().find('label[for="' + this.id + '"]').addClass('focused');
 })
 $('.expose').blur(function(){
  $('.expose').removeClass('focused')
   .parent().find('label[for="' + this.id + '"]').removeClass('focused');
  $('#expose').remove();
 })
})