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

Question

Have ~500 anchor tags in a grid that all have title attributes, I would like to get that title from the element the user is currently hovering, and display it at the top of the grid so you can tell what you are hovering over. Or, is there an 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 to find any way to grab this, yet. Any tips or alternatives helpful!

Demo Here

Answer 1

Try this:

$('.color').mouseover(function() {
    var title = this.title;
    // do something with title...
});

---

As you have 500 elements, you could use a single delegated handler to improve performance. Firstly wrap your elements in a containing div:

<div id="container">
    <!-- your current code here -->
</div>

Then in jQuery:

$('#container').on('mouseover', '.color', function() {
    var title = this.title;
    console.log(title);
});

This will result in 1 element having an event handler instead of potentially 500.

Answer 2

Adding to what's already been posted here, you should move as much style information into CSS as possible. Taking @Rory McCrossan suggestion, if you put the whole thing inside of a container, then we can use that to style just the color elements with the following css

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

Then our HTML should look like this:

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

We can do the rest with js/jQuery.

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

This code uses jQuery's on method to attach a delegated handler to mouseenter and mouseleave events for all a elements inside the #colors container.

See this demo:

jsFiddle