使用 PHP 数组分配随机 CSS 伪类答案

【问题标题】：Assigning random CSS pseudo classes using PHP arrays使用 PHP 数组分配随机 CSS 伪类
【发布时间】：2010-11-08 19:55:57
【问题描述】：

目标：在用户鼠标悬停时为 Wordpress 生成的标签云随机分配不同颜色的 CSS 背景。

我的方法（目前不成功）：

        <?php 
            $colors = array( 0 => "#645676", "#427048", "#654335", "#ab2805", "#a59d57", "#302f2f", "#81510d" );
            $tags = wp_tag_cloud('smallest=10&largest=10&unit=px&number=40&format=array&echo=0'); 
            shuffle($tags); 
            foreach ($tags as $tag) { 
                    shuffle($colors);
                echo "<li style=\"a:hover=background:".$colors[0].";\"> $tag \n </li>"; 
            } 
        ?>

我认为 foreach PHP 循环是最简单的方法。我创建了两个数组（$colors 和 $tags）。我用我想要使用的颜色的十六进制标签手动填充了 $colors。 $tags 由 wordpress 标签云数组填充（如果有兴趣，请在此处了解更多信息：http://codex.wordpress.org/Function_Reference/wp_tag_cloud），我已将其设置为在此博客上抓取 40 个最受欢迎的标签。

然后我在 $tags 上使用 PHP shuffle 函数来混合前 40 个标签，通过 foreach 循环运行这 40 个标签，然后随机分配一个混洗的 $colors 到一个 CSS 伪类，该类得到回显。

代码有效，这里是输出示例：

<li style="a:hover=background:#302f2f;"> <a href='http://localhost:8888/nutritionwonderland_2/tag/truvia/' class='tag-link-49' title='3 topics' style='font-size: 10px;'>truvia</a> 
 </li><li style="a:hover=background:#81510d;"> <a href='http://localhost:8888/nutritionwonderland_2/tag/cancer/' class='tag-link-8' title='11 topics' style='font-size: 10px;'>cancer</a> 
 </li><li style="a:hover=background:#427048;"> <a href='http://localhost:8888/nutritionwonderland_2/tag/antioxidants/' class='tag-link-93' title='4 topics' style='font-size: 10px;'>antioxidants</a> 
 </li>

问题：当我将鼠标悬停在任何标签上时，背景永远不会出现。这让我觉得 CSS 可能很糟糕。

花生画廊的几个问题：
1) 如何通过 PHP 随机应用 CSS 伪类？
2) 即使这样可行，此处的 CSS 输出是否符合标准？
3）我应该担心这里的标准吗？

有兴趣听到任何回复 - 提前感谢您的时间。

【问题讨论】：

我不认为style="a:hover=background:#427048;" 是有效的CSS。
伪类属于样式表或样式标签。

标签： php css pseudo-class

【解决方案1】：

跳出来的第一件事。如果您只是更改背景色而不更改其余与背景相关的项目，则最好使用背景色作为要更改的目标元素。其次，我可能会在样式表中呈现 css，即使是随机化，并为每个 a 标签提供适当的类

<li class="pseudo_01"> <a href='http://localhost:8888/nutritionwonderland_2/tag/truvia/' class='tag-link-49' title='3 topics' style='font-size: 10px;'>truvia</a>

和

<style>
.pseudo_01{
...
}
</style>

【讨论】：

有趣的想法 - 我没有想到这种方法：在样式表中定义不同颜色的背景，然后随机应用它们。这也应该进一步简化 PHP。好主意。
对此处发布的原始 PHP 代码的修改非常轻微 - 我所做的只是将 $colors 数组定义为 0,1,2,3,4,5,6，然后只是更改了调用相应地在 foreach 循环中下降。在样式表中安全地使用伪类后，一切都如我所愿。

【解决方案2】：

How to write a:hover in inline CSS?

简短的回答：你不能。

长答案：你不应该。

给它一个类名或一个 id 并使用样式表来应用样式

:hover 是一个伪选择器，对于 css，只在样式内有意义床单。没有内联样式等效（因为它没有定义选择标准）。

【讨论】：

【解决方案3】：

我认为你需要 javascript 来完成这个。 PHP 是服务器端的，因此您无法在鼠标悬停时选择随机颜色。我可能完全误解了这个问题；我假设您不想在页面加载时简单地选择随机颜色并在每次鼠标悬停时显示相同的颜色。

【讨论】：