好的,这只是一个准系统示例...我不会对其进行动画处理或添加任何标签或输入或任何内容...但原则上它是这样工作的。关于操作 CSS 属性要记住的最重要的事情z-index
是任何具有 z-index 的元素都必须被定位(即position:relative
、position:absolute
等):
HTML(假设):
<div id="overlay"></div>
<div id="div1" class="usable"></div>
<div id="div2" class="usable"></div>
<div id="div3" class="usable"></div>
CSS:
#overlay {
position:absolute;
height:100%;
width:100%;
background-color:#333;
opacity: 0;
z-index:0;
}
div.usable {
position:relative;
z-index:1;
width:100px;
height:100px;
background-color:#F0F;
}
div.active {
background-color:#F00;
z-index:5;
}
jQuery:
$(document).ready(function(){
$("div.usable").hover(
function(e){
$("#overlay").css({"z-index":2,"opacity":.5});
$(this).addClass("active");
},
function(e){
$("#overlay").css({"z-index":0,"opacity":0});
$(this).removeClass("active");
}
);
});
至于整个“文本和输入在一行中”的事情,display
如果这在您的应用程序中可行,我建议查看更改输入和标签的 CSS 属性以将它们显示为内联或内联块。例子:
input.rowStyle {display:inline;}
希望这可以帮助!
</p>