实际上,向您展示我想要实现的目标并不是试图解释会更容易。
州1:
领域负责人没有关注。很简单。
州2:
领域负责人得到了关注。 div显示在文本框和文本周围。
显示灰色框并定位它没有问题。问题是文本框显示在框内,但仍保持其当前位置。
当文本框被定位为绝对(尝试z-index)时,内容正在被搞乱。
我正在使用jQuery。
任何想法?
答案 0 :(得分:1)
您无需为文本框指定绝对位置。只需给它位置:relative并设置zIndex,使其位于灰色框的顶部。如果它有位置:静态(默认)zIndex将不起作用。
答案 1 :(得分:1)
你看过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();
})
})