代码之家 › 专栏 › 技术社区 › serraosays

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

pseudo-class css php

serraosays · 技术社区 · 14 年前

目标:随机分配不同颜色的CSS背景到用户鼠标器上由WordPress生成的标签云。

我的方法(迄今未成功):

        <?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)我应该担心这里的标准吗?

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

3 回复 | 直到 14 年前

FatherStorm 14 年前

第一件事就是跳出来。如果只是更改背景颜色,而不是其他与背景相关的项,那么最好使用背景颜色作为要更改的目标元素。第二,我可能会在样式表中呈现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>

Community CDub 7 年前

How to write a:hover in inline CSS?

简短的回答:你不能。

答案很长:你不应该。

给它一个类名或ID并使用应用样式的样式表

:hover是一个伪选择器,用于 CSS,仅在样式中有意义表。没有内嵌样式等效(因为它没有定义选择标准)。

Tmas 14 年前

我想你需要一个javascript。PHP是服务器端的,所以您不能在鼠标上方随机选择颜色。我可能完全误解了这个问题;我假设您不想在页面加载时简单地选择一个随机颜色,并在每次鼠标悬停时显示相同的颜色。