动态和静态HTML中div悬停样式的不同行为

此问题涉及使用与使用PHP动态生成的页面相同的HTML和样式的一页静态html之间的CSS行为差异。动态和静态HTML中div悬停样式的不同行为

在悬停效果是通过在一个单独的样式表中定义下列样式施加的静态页面：

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我做了查看源文件并复制生成的HTML到一个单独的文件，然后加载该英寸

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

我已经看过这个网站的其他地方，看到提及的文档类型有影响。在这两种情况下，我的文档类型指定如下：

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

为了您的信息，我正在使用Safari版本5.1.2。

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

2012-01-27 Braunius

这没有意义。 Web浏览器不知道服务器上会发生什么，也就是说，如果它是静态HTML或动态生成的HTML，它们都是一样的。你应该进一步寻找差异。 – dmedvinsky 2012-01-27 17:58:36

你有什么机会向我们展示一个例子？ – j08691 2012-01-27 18:01:22

不知道在给定代码的情况下寻找哪些其他差异应该是相同的，从动态页面复制并粘贴到静态页面而不进行任何编辑。 – Braunius 2012-01-27 18:04:02

PHP在服务器上运行，对Web浏览器如何显示结果HTML，CSS没有任何了解或影响。如果存在差异，那么这意味着您使用PHP生成的HTML/CSS与静态页面中包含的HTML/CSS不同。

2012-01-27 18:04:14 Jeff

正如我上面所解释的，也许它是在先前运行中加载的Javascript的缓存问题，它不会在为该页面生成的源代码中显示自己？ – Braunius 2012-01-30 08:17:37

这不一定是你的问题的答案，但要记住早期版本的IE不明白：悬停在不是链接的元素。我不确定在哪一个版本中，我的头顶是真实的。

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

2012-01-27 18:09:39 chipcullen

有趣的是，我向运行IE的朋友提供了展示此问题的代码的完整副本，并且完美地为他工作。 – Braunius 2012-01-30 08:08:31

我一定会考虑在jQuery中使用悬停方式，因为我在其他地方使用该库以获得良好效果。 – Braunius 2012-01-30 08:19:23

在真正花时间查看我的答案后，我认为这只是到了IE6。 IE7和更高版本应该尊重：悬停在所有元素上。如果IE6不是你的问题，那么你不需要担心它。 – chipcullen 2012-01-31 18:43:47

回答