编辑:这仅在Windows Webkit上发生,在Mac上不会发生
我正在尝试使用带有背景图像的固定大小的单元格来设置网格。当您悬停时,背景图像和单元格的高度会更改/增加,并覆盖其下方的行。
我尝试了几种方法来创建这个想法,并且归结为应用于行的z-index表将最有效。
正如标题所说,我的问题是我在IE / FF中使用它,但无论出于何种原因,webkit似乎并不关心行设置上的z-index。
我应该注意,每个网格内部都是jquery循环插件,我认为它不会影响任何东西,但我也有一些问题暂停webkit中的循环插件。
表格的html和两行
<div id="girlcontent">
<table class="girltable" cellpadding="0" cellspacing="0">
<tr>
<td class="girlrow" valign="top">
<div class="girlbox">
<div class="girlplace" id="girlcycle">
<img src="img/girls/1a.jpg" alt="image" />
<img src="img/girls/1b.jpg" alt="image" />
<img src="img/girls/1c.jpg" alt="image" />
</div>
<div id="gctext">
<div class="girltext">Butters</div>
<div class="girltextsm">info</div>
</div>
</div>
</td>
<td class="girlrow" valign="top">
<div class="girlbox">
<div class="girlplace" id="girlcycle2">
<img src="img/girls/1g.jpg" alt="image" />
<img src="img/girls/1c.jpg" alt="image" />
<img src="img/girls/1d.jpg" alt="image" />
</div>
<div id="gctext2">
<div class="girltext">CandyCanes</div>
<div class="girltextsm">info</div>
</div>
</div>
</td>
<td class="girlrow" valign="top">
<div class="girlbox">
<div class="girlplace" id="girlcycle3">
<img src="img/girls/1e.jpg" alt="image" />
<img src="img/girls/1b.jpg" alt="image" />
<img src="img/girls/1f.jpg" alt="image" />
</div>
<div id="gctext3">
<div class="girltext">Tandy</div>
<div class="girltextsm">info</div>
</div>
</div>
</td>
<td class="girlrow" valign="top">
<div class="girlbox">
<div class="girlplace" id="girlcycle4">
<img src="img/girls/1b.jpg" alt="image" />
<img src="img/girls/1e.jpg" alt="image" />
<img src="img/girls/1g.jpg" alt="image" />
</div>
<div id="gctext4">
<div class="girltext">Dancer</div>
<div class="girltextsm">info</div>
</div>
</div>
</td>
</tr>
<tr>
<td class="girlrow2" valign="top">
<div class="girlbox">
<div class="girlplace" id="girlcycle5">
<img src="img/girls/1f.jpg" alt="image" />
<img src="img/girls/1e.jpg" alt="image" />
<img src="img/girls/1g.jpg" alt="image" />
</div>
<div id="gctext5">
<div class="girltext">Sam</div>
<div class="girltextsm">info</div>
</div>
</div>
</td>
<td class="girlrow2" valign="top">
<div class="girlbox">
<div class="girlplace" id="girlcycle6">
<img src="img/girls/1d.jpg" alt="image" />
<img src="img/girls/1e.jpg" alt="image" />
<img src="img/girls/1g.jpg" alt="image" />
</div>
<div id="gctext6">
<div class="girltext">Tina</div>
<div class="girltextsm">info</div>
</div>
</div>
</td>
<td class="girlrow2" valign="top">
<div class="girlbox">
<div class="girlplace" id="girlcycle7">
<img src="img/girls/1f.jpg" alt="image" />
<img src="img/girls/1d.jpg" alt="image" />
<img src="img/girls/1g.jpg" alt="image" />
</div>
<div id="gctext7">
<div class="girltext">Natalie</div>
<div class="girltextsm">info</div>
</div>
</div>
</td>
<td class="girlrow2" valign="top">
<div class="girlbox">
<div class="girlplace" id="girlcycle8">
<img src="img/girls/1b.jpg" alt="image" />
<img src="img/girls/1e.jpg" alt="image" />
<img src="img/girls/1g.jpg" alt="image" />
</div>
<div id="gctext8">
<div class="girltext">Lana</div>
<div class="girltextsm">info</div>
</div>
</div>
</td>
</tr>
</table>
</div>
内容区/背景/等的CSS
#girlcontent {
width:860px;
background-color:#000;
}
#girlspace {
background-color:#000;
padding-bottom:35px;
width:860px;
}
.girlbox {
background-image:url(../img/girlsbacka.png);
background-repeat:no-repeat;
background-position:center;
height:264px;
width:194px;
margin:10px;
z-index:0;
position:absolute;
}
.girlbox:hover {
background-image:url(../img/girlsbackb.png);
background-repeat:no-repeat;
background-position:center;
height:325px;
width:194px;
}
.girltable {
width:860px;
position:relative;
z-index:0;
}
.girlrow {
height:264px;
z-index:3;
position:relative;
}
.girlrow2 {
height:264px;
z-index:2;
position:relative;
}
该地区的Javascript,还有更多基于ID的
$(document).ready(function() {
$('#girlcycle').cycle({
fx: 'fade',
delay: -250
});
$('#girlcycle').cycle('pause');
$('#gctext').hide();
$('#girlcycle').hover(function() {
$('#girlcycle').cycle('resume', true);
$('#gctext').show();
});
$('#girlcycle').mouseleave(function() {
$('#girlcycle').cycle('pause');
$('#gctext').hide();
});
如果有人知道为什么这在webkit中不起作用,我将非常感谢您提供的任何帮助!
答案 0 :(得分:1)
我遇到了这些问题as well。这是我发现的:
'position:relative'对table-row-group,table-header-group,table-footer-group,table-row,table-column-group,table-column,table-cell和table的影响-caption元素未定义。
我假设Firefox以一种方式实现它,而WebKit以不同的方式实现它,并且两者都是正确的,因为它是未定义的。这里故事的寓意不是指定表格元素的位置。