javascript - How can I get the title attribute of the current anchor being hovered? -

have ~500 anchor tags in grid have title attributes, title element user hovering, , display @ top of grid can tell hovering over. or, there alternative?

<a class="color" title="#wicked" style="height: 30px; width: 30px; background-color: rgb(70, 60, 65); display: block;"></a> <a class="color" title="#tallulah" style="height: 30px; width: 30px; background-color: rgb(95, 58, 61); display: block;"></a> <a class="color" title="#merlot" style="height: 30px; width: 30px; background-color: rgb(79, 56, 57); display: block;"></a> <a class="color" title="#speakeasy" style="height: 30px; width: 30px; background-color: rgb(87, 50, 65); display: block;"></a> <a class="color" title="#tamarind" style="height: 30px; width: 30px; background-color: rgb(95, 68, 74); display: block;"></a> <a class="color" title="#oxford" style="height: 30px; width: 30px; background-color: rgb(101, 64, 60); display: block;"></a> <a class="color" title="#mulberry" style="height: 30px; width: 30px; background-color: rgb(111, 70, 83); display: block;"></a> <a class="color" title="#crantini" style="height: 30px; width: 30px; background-color: rgb(128, 81, 87); display: block;"></a> <a class="color" title="#sangria" style="height: 30px; width: 30px; background-color: rgb(121, 87, 90); display: block;"></a> <a class="color" title="#pueblo" style="height: 30px; width: 30px; background-color: rgb(141, 108, 109); display: block;"></a> <a class="color" title="#bel ange rose" style="height: 30px; width: 30px; background-color: rgb(167, 123, 127); display: block;"></a> <a class="color" title="#foxglove" style="height: 30px; width: 30px; background-color: rgb(200, 143, 120); display: block;"></a> <a class="color" title="#cactus bloom" style="height: 30px; width: 30px; background-color: rgb(230, 191, 164); display: block;"></a> <a class="color" title="#pillow talk" style="height: 30px; width: 30px; background-color: rgb(240, 221, 211); display: block;"></a> 

can't seem find way grab this, yet. tips or alternatives helpful!

demo here

adding what's been posted here, should move style information css possible. taking @rory mccrossan suggestion, if put whole thing inside of container, can use style color elements following css

#colors {     height: 30px;     width: 30px;     display: block; } 

then our html should this:

<div id='currentcolor'>color: </div> <div id='colors'>     <a title="wicked" style="background-color: rgb(70, 60, 65);"/>     <!-- more colors --> </div> 

we can rest js/jquery.

$('#colors').on({     mouseenter: function () {         $('#currentcolor').text("color: " + this.title);     },     mouseleave: function () {         $('#currentcolor').text("color: ");     } }, 'a'); 

this code uses jquery's on method attach delegated handler mouseenter , mouseleave events a elements inside #colors container.

see demo:

jsfiddle