javascript - 如何获取正在悬停的当前 anchor 的title属性？

在一个具有标题属性的网格中有〜500个 anchor 标记，我想从用户当前悬停的元素中获取该标题，并将其显示在网格的顶部，以便您知道要悬停的内容。还是有其他选择？

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

似乎找不到任何办法来解决这个问题。任何提示或替代方法都有帮助!

示范Here

最佳答案

除了此处已发布的内容外，还应将尽可能多的样式信息移入CSS。采纳@Rory McCrossan的建议，如果将整个内容放入容器中，则可以使用以下 css 将其仅用于设置颜色元素的样式

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

然后，我们的 HTML 应该如下所示:

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

我们可以使用 js / jQuery 完成其余工作。

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

此代码使用jQuery的 on 方法将 delegated handler 附加到mouseenter容器内所有mouseleave元素的a和#colors事件。

观看此演示:

jsFiddle