Question

我正在使用如下的跨度悬停，适用于IE和Opera，但不适用于Firefox。非常奇怪的是它可以在我的本地机器上运行，但在我托管我的网站之后，它可以在除Firefox之外的每个浏览器中的真实网站上运行...

css file ....

span.dropt:hover {text-decoration: none;  z-index:6; ;width: 19%;}
span.dropt span {position: absolute; right: -9999px;
  margin: 0px 0 0 0px; padding: 0px 0px 0px 0px;
  border-style:solid; border-color:black; border-width:0px; z-index:6;}
span.dropt:hover span {right: 2%;}

html ...

          <tr>
            <td style="width:290px;"><p style="font-family:Chalk; colour:white; font-size:x-large;"><b><u>Learn to draw: </u><br />
            Great drawing course
            </b></p></td>
            <td style="width:400px;"><p style="font-family:verdana;"></p><b>Move beyond crayons
            </b></td>
            <td style="width:180px;"><p style="font-family:verdana;"></p><b><span class="dropt"><p style="font-family:verdana; text-align:center;">Basic Drawing</p><span><img src="MyFolder\ImageToPopUpOnHover.png"/><br/></span></span></b></td>
            <td style="width:125px;"><b>Over 12s

            </b></td>
          </tr>

如何在Firefox中使用？

Answer 1

您的CSS不正确。您使用.span代替span作为选择器。它应该是：

span.dropt:hover {text-decoration: none;  z-index:6; ;width: 19%;}
span.dropt span {position: absolute; right: -9999px;
  margin: 0px 0 0 0px; padding: 0px 0px 0px 0px;
  border-style:solid; border-color:black; border-width:0px; z-index:6;}
span.dropt:hover span {right: 2%;}

Answer 2

此外，除了史蒂夫桑德斯＆＃39;回答，这是你需要解决的问题：span.dropt:hover {text-decoration: none; z-index:6; ;width: 19%;}在z-index之后有一个额外的分号。

这是正确的：

span.dropt:hover {text-decoration: none; z-index:6; width: 19%;}

html css span悬停不在firefox中工作

2 个答案: