Rollover SVG rand Color

by Nick Hulea

HTML

<span class="hover ">is a nerd</span>, 
<span class="hover music">a music lover</span>, 
<span class="hover animal">an animal caretaker</span>, 
<span class="hover gardener">a gardener</span>, 
<span class="hover brewer">a home brewer</span>, 
<span class="hover isometric">and an isometic angle admirerer</span>. 
He secretly wishes he became 
<span class="hover design">a graphic designer</span> 
but instead is going to 
<span class="hover marry">marry one</span>. He supports 
<span class="hover open">open everything</span> and believes that done is better than perfect. He used to 
<span class="hover politics">stay out of politcs but Lamar Smith made him get involved.</span>

<br/>
<!--book-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="book" class="icon nerd open" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
    <path d="M64.008,72.381c4.002-3.149,12.23-11.582,15.089-21.179c-6.511-8.01-33.912-42.187-40.238-50.08   C38.212,8.613,31.63,24.377,20.21,29.646c-5.247,2.56-10.477,4.156-12.467,4.721l39.077,47.32   C51.235,80.263,59.958,75.56,64.008,72.381z"/>
            <path  d="M90.405,75.352c-6.5,3.781-13.381,7.281-20.674,9.929c-8.632,3.134-19.05,6.681-22.386,7.664v5.127     l43.046-15.479L90.405,75.352z"/>
            <polygon points="6.891,35.865 6.891,50.088 45.703,97.945 45.736,82.902    "/>
        </g>
        <path d="M88.717,70.42c-5.018,3.936-11.386,7.921-18.278,11.363c-6.521,3.266-20.879,7.668-23.093,8.339v1.144    c3.686-1.09,13.036-3.898,21.237-7.013c9.104-3.457,22.12-11.628,22.12-11.628L88.717,70.42z"/>
    </g>
    <path d="M80.877,50.835l-0.114,0.403c-2.851,10.142-11.25,18.858-15.762,22.409   c-4.225,3.319-13.009,8.054-17.655,9.561v2.168c6.53-2.034,15.656-6.36,20.721-9.922c8.699-6.128,17.195-14.63,22.419-22.404   l0.047,0.036C84.648,46.442,51.938,9.001,49.818,6.309c-0.719,1.357-1.368,2.265-2.422,2.887  ...

CSS

.icon {
    background: #f5f5f5;
    width: 50px;
    height: 50px;
    margin-right: 10px;
}

.icon:hover {
    cursor: pointer;
}

span {

}

JavaScript

//global radomized color pallette
var colors = ["#6F216C", "#F34B0D", "#C50102", "#5DA537", "#F1D81B"];

//turn an icon a random color
$(function() {
    $(".icon").hover(function() {
        var color = colors[Math.floor(Math.random()*5)];
        $(this).css('fill',color);       
        },
        function() {
            $(this).css('fill','black');
            })
});

//this will change the color of icons with the same class as the span hovered
$(function() {
    $(".icon").hover(function() {      
        var color = colors[Math.floor(Math.random()*5)];
        var classTarget = "." + $(this).attr('class').split(/\s+/)[1];
        $(classTarget).css('fill', color);
        $(this).css('color', color);
        },
        function() {
            var classTarget = "." + $(this).attr('class').split(/\s+/)[1];
            $(classTarget).css('fill','black');
            $(this).css('color','black');
            })
});