Z-Index div悬停覆盖问题与[windows] Webkit（Safari，Opera等） [英] Z-Index div hover overlay issues with [windows] Webkit (Safari, Opera, etc)

问题描述

编辑：这只发生在Windows Webkit上，不会发生在Mac上

我试图设置一个固定大小细胞与背景图象。当您悬停时，背景图像和单元格的高度会更改/增加，并覆盖其下方的行。

我尝试了几种方法来创建这个想法，并得出一个表，其中z-index应用于行将工作最好。

我的问题，正如标题所说，是我有这个工作在IE / FF，但无论什么原因webkit似乎不在乎z-索引对行设置。

我应该注意，每个网格内的是jquery周期插件，我不认为会影响任何东西，但我有一些问题，暂停在webkit的循环插件

 
 $ b 
 表和两行的html  < div id =girlcontent> 
< table class =girltablecellpadding =0cellspacing =0> 
< tr> 
< td class =girlrowvalign =top> 
< div class =girlbox> 
< div class =girlplaceid =girlcycle> 
< img src =img / girls / 1a.jpgalt =image/> 
< img src =img / girls / 1b.jpgalt =image/> 
< img src =img / girls / 1c.jpgalt =image/> 
< / div> 
< div id =gctext> 
< div class =girltext> Butters< / div> 
< div class =girltextsm> info< / div> 
< / div> 
< / div> 
< / td> 
< td class =girlrowvalign =top> 
< div class =girlbox> 
< div class =girlplaceid =girlcycle2> 
< img src =img / girls / 1g.jpgalt =image/> 
< img src =img / girls / 1c.jpgalt =image/> 
< img src =img / girls / 1d.jpgalt =image/> 
< / div> 
< div id =gctext2> 
< div class =girltext> CandyCanes< / div> 
< div class =girltextsm> info< / div> 
< / div> 
< / div> 
< / td> 
< td class =girlrowvalign =top> 
< div class =girlbox> 
< div class =girlplaceid =girlcycle3> 
< img src =img / girls / 1e.jpgalt =image/> 
< img src =img / girls / 1b.jpgalt =image/> 
< img src =img / girls / 1f.jpgalt =image/> 
< / div> 
< div id =gctext3> 
< div class =girltext> Tandy< / div> 
< div class =girltextsm> info< / div> 
< / div> 
< / div> 
< / td> 
< td class =girlrowvalign =top> 
< div class =girlbox> 
< div class =girlplaceid =girlcycle4> 
< img src =img / girls / 1b.jpgalt =image/> 
< img src =img / girls / 1e.jpgalt =image/> 
< img src =img / girls / 1g.jpgalt =image/> 
< / div> 
< div id =gctext4> 
< div class =girltext>舞者< / div> 
< div class =girltextsm> info< / div> 
< / div> 
< / div> 
< / td> 
< / tr> 
 < td class =girlrow2valign =top> 
< div class =girlbox> 
< div class =girlplaceid =girlcycle5> 
< img src =img / girls / 1f.jpgalt =image/> 
< img src =img / girls / 1e.jpgalt =image/> 
< img src =img / girls / 1g.jpgalt =image/> 
< / div> 
< div id =gctext5> 
< div class =girltext> Sam< / div> 
< div class =girltextsm> info< / div> 
< / div> 
< / div> 
< / td> 
< td class =girlrow2valign =top> 
< div class =girlbox> 
< div class =girlplaceid =girlcycle6> 
< img src =img / girls / 1d.jpgalt =image/> 
< img src =img / girls / 1e.jpgalt =image/> 
< img src =img / girls / 1g.jpgalt =image/> 
< / div> 
< div id =gctext6> 
< div class =girltext> Tina< / div> 
< div class =girltextsm> info< / div> 
< / div> 
< / div> 
< / td> 
< td class =girlrow2valign =top> 
< div class =girlbox> 
< div class =girlplaceid =girlcycle7> 
< img src =img / girls / 1f.jpgalt =image/> 
< img src =img / girls / 1d.jpgalt =image/> 
< img src =img / girls / 1g.jpgalt =image/> 
< / div> 
< div id =gctext7> 
< div class =girltext>娜塔莉< / div> 
< div class =girltextsm> info< / div> 
< / div> 
< / div> 
< / td> 
< td class =girlrow2valign =top> 
< div class =girlbox> 
< div class =girlplaceid =girlcycle8> 
< img src =img / girls / 1b.jpgalt =image/> 
< img src =img / girls / 1e.jpgalt =image/> 
< img src =img / girls / 1g.jpgalt =image/> 
< / div> 
< div id =gctext8> 
< div class =girltext> Lana< / div> 
< div class =girltextsm> info< / div> 
< / div> 
< / div> 
< / td> 
< / tr> 
< / table> 
< / div> 
  

内容区域/背景/ etc的CSS b
$ b

  #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; 
} 
  

strong>

  $（document）.ready（function（）{
 $（'＃girlcycle'）。cycle （{
 fx：'fade'，
 delay：-250 
}）; 
 $（'＃girlcycle'）。cycle（'pause'）; 
 $（'＃gctext'）。hide（）; 
 $（'＃girlcycle'）。hover（function（）{
 $（'＃girlcycle'）。 ; 
 $（'＃gctext'）。show（）; 
}）; 
 $（'＃girlcycle'）。mouseleave（function（）{
 $（' girlcycle'）。cycle（'pause'）; 
 $（'＃gctext'）。hide（）; 
}）; 
  

如果任何人有任何想法为什么这不能在webkit中工作，我将感谢您可以提供任何帮助！

我遇到了这些类型的问题这里是我发现：

根据 CSS 2.1规格：

'position：relative'对table-row-group，table-header-group，table-footer-group，table-row，table-column-group，table-column，table-cell和表字元素未定义。

我假设Firefox实现它的一种方式，WebKit实现它的方式不同，是正确的，因为它是未定义的。这里的故事的道德不是在表格元素上指定位置。

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!

解决方案

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.

这篇关于Z-Index div悬停覆盖问题与[windows] Webkit（Safari，Opera等）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！