Assigning random CSS pseudo classes using PHP arrays

The goal: to randomly assign different color CSS backgrounds to a Wordpress-generated tag cloud on a mouseover by the user.

My method (so far unsuccessful):

        <?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>"; 
            } 
        ?>

I figured a foreach PHP loop would be the easiest way to do this. I created two arrays ($colors and $tags). I manually filled $colors with the hex tags of the colors I want to use. $tags is populated by the wordpress tag cloud array (more info here if interested: http://codex.wordpress.org/Function_Reference/wp_tag_cloud) which I have set to grab the 40 most popular tags on this blog.

I then use the PHP shuffle function on $tags to mix up the top 40 tags, run those 40 tags through a foreach loop which then randomly assigns one of the shuffled $colors to a CSS pseudo class which gets echoed out.

The code works, here is a sample of the output:

<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/nut开发者_JAVA百科ritionwonderland_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>

The problem: when I mouseover any of the tags, the background never shows up. This makes me think the CSS may be bad.

A couple of questions for the peanut gallery:

1) How do you apply CSS pseudo classes randomly via PHP?

2) Even if this worked, would the CSS output here by standards compliant?

3) Should I even worry about standards here?

Interested to hear any responses - thanks in advance for your time.

first thing that jumps out. if you're just changing the background-color an dnot the rest of the background-associated items, you might be better off using background-color as your targeted element to change. second, I would probably render the css out in the stylesheet, even with your randomization, and give each of the a tags the appropriate class

<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> 

and

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

How to write a:hover in inline CSS?

short answer: you can't.

long answer: you shouldn't.

Give it a class name or an id and use stylesheets to apply the style

:hover is a pseudo-selector and, for css, only has meaning within the style sheet. There is no inline-style equivalent (as it isn't defining the selection criteria).

I think you'll need javascript for this one. PHP is server-side, so you couldn't pick a random color on mouse over. I may have completely misinterpreted the question; I assume that you don't want to simply pick a random color on page load and display that same color on every mouse over.