问题
Edit: This ONLY occurs on Windows Webkit, does not occur on Macs
I am trying to set up a grid with fixed sized cells with a background image. When you hover, the background image and height of cell is changed/increased and overlays the row below it.
I tried a few ways to create this idea and came down to that a table with z-index applied to the row would work the best.
My issue, as the title says, is that I have this working in IE/FF, but for whatever reason webkit doesn't seem to care about the z-index on the row settings.
I should note that inside each grid is the jquery cycle plugin which I don't think affects anything, but I'm having some issues with pausing the cycle plugin in webkit as well.
html of the table and two rows
<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 for the content area/background/etc
#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 for the area, there's more based upon the ID's
$(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();
});
If anyone has any idea why this wouldn't work in webkit, I'd be grateful for any help that you can offer!
回答1:
I ran into these kinds of issues as well. Here's what I found out:
According to the CSS 2.1 specifications:
The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.
I'm assuming that Firefox implements it one way, and WebKit implements it a different way and both are correct since it is undefined. The moral of the story here is not to specify a position on table elements.
来源：https://stackoverflow.com/questions/1780697/z-index-div-hover-overlay-issues-with-windows-webkit-safari-opera-etc