Question

这个问题涉及使用相同HTML的静态html页面与使用PHP动态生成的页面之间的CSS行为的差异。

在静态页面中，悬停效果由在单独的样式表中定义的以下样式应用：

div.selectable_class { background-color:white}
div.selectable_class:hover { background-color:blue }

静态HTML片段如下：

<div class="selectable_class" onclick="event handler here">
    <div class="ano_class">
        <!-- Contents-->
    </div>
</div>

当我使用此代码加载静态页面时，悬停效果按预期工作，颜色从白色变为蓝色，然后变回白色。

然后我使用相同的样式表并使用PHP动态生成HTML，并注意到悬停效果已经丢失但是通过单击div来触发颜色更改。

为了确认我正在正确生成动态HTML，我做了一个View Source并将生成的HTML复制到一个单独的文件中，然后将其加载到。

奇怪的是，悬停效果在该版本中正常工作！

我在本网站的其他地方看了一下，看到了有效的文件类型。在这两种情况下，我的文档类型都指定如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

我正在使用Safari版本5.1.2。

如果有人能够阐明这种行为，我将非常感激。

Answer 1

PHP在服务器上运行，并且不知道或影响Web浏览器如何显示生成的HTML，CSS。如果存在差异，则表示使用PHP生成的HTML / CSS与静态页面中包含的HTML / CSS不同。

Answer 2

这不一定是您的问题的答案，但请记住IE的早期版本不理解：将鼠标悬停在非链接的元素上。我不确定这个版本在我的头顶上是不是真的。

如果您正在寻找跨浏览器解决方案，那么您可能不得不使用javascript函数，例如jQuery的.hover()。这也可能是解决当前问题的一种方法。