我正在尝试创建一个悬停事件,该事件不会影响我布局的其余部分。z索引似乎是实现这一点的方法,但我无法使其发挥作用。我试图坚持使用css,但是jQuery是可行的。
完整应用程序:http://jsfiddle.net/9cRdq/
html
<div class="big-square" id="br">
<div class="little-square" id="br-tl"></div>
<div class="little-square" id="br-tr"></div>
<div class="little-square" id="br-bl"></div>
<div class="little-square" id="br-br"> </div>
</div>
css
.big-square
{
position: relative;
z-index: 1;
font-size: 2em;
float: left;
width: 30%;
min-width: 4em;
min-height: 4em;
margin: 0 2% 2% 0;
background: #000;
}
.little-square
{
position: relative;
z-index: 1;
cursor: pointer;
float: left;
width: 48%;
height: 48%;
background: #cd2626;
}
.little-square:hover
{
z-index: 1000;
}
jquery
$(document).ready(resizeBigSquare);
window.onresize = resizeBigSquare;
function resizeBigSquare() {
$('.big-square').css(
{
'height': ($('.big-square').width() * .85) + 'px',
'line-height': ($('.big-square').width() * .85) + 'px'
});
$('.little-square, .rectangle-top, .rectangle-bottom').css(
{
'line-height': $('.little-square').height()+ 'px'
});
}
悬停时的z-index
更改工作正常。事实上,这里有一把小提琴,它通过使用box-shadow
来显示它的工作。当您的div.little-square悬停在它上面时,它实际上高于它的对等方,否则box-shadow
会夹在其他方后面。
注意,z-index
只影响z轴上的堆叠顺序,不影响其他(尺寸、颜色等)
如果您希望在悬停时(不破坏网格)更改div.little-square的大小,请考虑在每个正方形内创建一个子元素。然后,将position:absolute
应用于新的子元素,将小方块的一些属性传递给它,并相应地设置其悬停状态的样式。这把小提琴是我所说的一个例子。