如何获取当前锚点的title属性？

Question

在网格中有~500个锚标签都有标题属性,我想从用户当前悬停的元素中获取该标题,并将其显示在网格的顶部,这样你就可以知道你在盘旋的是什么.或者,还有其他选择吗？

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

似乎无法找到任何方法来抓住这个.任何提示或替代方案都有用

在这里演示

Answer 1

试试这个:

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

由于您有500个元素,因此可以使用单个委派处理程序来提高性能.首先将元素包装在一个包含div:

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

然后在jQuery中:

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

这将导致1个元素具有事件处理程序而不是潜在的500.