0

编辑:这仅发生在 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 中不起作用,我将不胜感激您能提供的任何帮助!

4

1 回答 1

1

我也遇到过这类问题。这是我发现的:

根据CSS 2.1 规范

'position:relative' 对 table-row-group、table-header-group、table-footer-group、table-row、table-column-group、table-column、table-cell 和 table-caption 元素的影响未定义。

我假设 Firefox 以一种方式实现它,而 WebKit 以不同的方式实现它,两者都是正确的,因为它是未定义的。这里故事的寓意不是在表格元素上指定位置。

于 2010-10-04T23:02:16.673 回答