Here is a simple way, using Javascript and CSS, to randomly choose the hover behavior of your links. I chose to only change the color but you can easily modify the CSS in order to achieve your desired effect.
In a CSS file, create several CSS classes that describe the behaviors you would like to achieve when your user hovers over your link. Again, I chose to only change the color of my links when hovered.
Create a JavaScript file (or imbedded in your HTML with <script> tags) with an Array declaration and two functions. The Array will be a list of the class names created in the CSS from above.
The first function will return an int between 0 and the size of the array minus 1. This is done by calling the Math.random() method and multiplying it's result by the size of the array then using the Math.floor() function to represent the random float to an "integer". Note, JavaScript always uses floats, there is no integer type.
The second function will return the item in the array generated from the random number from the previous method.
Now the tricky part. The hardest part about this implementation is writing the HTML. It does make your <a> tags a bit messy, but it sure looks pretty to your user. Plus, who is really looking at your HTML source anyway?
For each of your links that you choose to use this random effect, you must add an 'onmouseover' event. The 'onmouseover' event must call the second function in your JavaScript to set the CSS className of the tag.
If you keep it like this you'll notice one minor flaw. When you hover your mouse it works all well and good until your mouse leaves the link. The effect will stay present. To fix this, the 'onmouseout' event must be added to your tag. I use the default className for the tag. Typically, links will use the <a> tag so the default className is 'a'.
This way, when your user's mouse leaves the link, it will return to it's default effect.
Voilà!
