html css span悬停在firefox中不起作用

我使用的是如下所示的span鼠标悬停，可以在IE和Opera上工作，但不能在Firefox上工作。非常奇怪的是，它在Firefox中的本地机器上工作，但在我托管了我的网站后，它在除Firefox之外的所有浏览器中的真实站点上工作

css文件

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>

学习绘画：

绘画精品课程

超越蜡笔
基本图形
超过12秒

---

如何在Firefox中实现此功能？

您的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%;} 

---

此外，除了Steve Sanders的答案之外，您还需要解决以下问题：

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

在z-index之后有一个额外的分号

这是正确的：

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

---

对不起，你是对的，我都是出于绝望才试的。实际上，跨度确实存在我所描述的问题。很抱歉，我的问题有误导性，我已经更新了它，让它更清晰…这是真的，但删除额外的分号并不能解决问题。