如何获取当前悬停的锚点的标题属性？

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>

目前似乎找不到任何方法来抓取它。有什么提示或替代方案吗？

演示 在这里

- tekstrand

---

这些链接标签不应该有一个锚点的标题，而应该是一个href。 - Romaindr

.color { width: 30px; height: 30px; display: block; }？ :) - Stefan

是的，正如@Stefan所说的那样！我正要发布一个更新的fiddle，它会样式化 样式属性。请点击这里查看更清晰的实现。 - KyleMit

@Stefan 当然没问题 :) 这只是为了让你们更容易理解，否则你们可能会写更多的代码！感谢你们关注我！ - tekstrand

Answer 1

试试这个：

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

由于你有500个元素，可以使用单个委托处理程序来提高性能。首先将您的元素包装在一个包含

中：

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

然后在jQuery中：

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

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

- Rory McCrossan

---

@JasonP 很好的观点。我错过了有500个它们的事实，现在正在编辑。 - Rory McCrossan

@RoryMcCrossan 非常感谢，您指出会有500个处理程序可以防止一些不好的情况。 - tekstrand

Answer 2

除了已经发布的内容，您应该尽可能将样式信息移动到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方法，将一个委托处理程序附加到#colors容器内所有a元素的mouseenter和mouseleave事件上。

查看此演示：

jsFiddle

- KyleMit

---

太好了！这是一个非常完整的答案，感谢您提供的所有提示。 - tekstrand

Answer 3

这里是在jsfiddle上解决你问题的方法

下面是代码

$('a').mouseover(function(){
    alert($(this).prop('title'));
});

- Deep Sharma

Answer 4

您可以简单地使用以下代码：

$('.color').hover(function(){

var title = $(this).attr("title");    

});

- Eshant Sahu

Answer 5

$("a:hover").mouseenter(function(){
   var _title = $(this).attr("title"); // Why prefix with an anchor? Maybe you need to replace....
   console.log(_title);
});

- josecatalani

Answer 6

这里是经过清理的HTML、CSS和脚本 点此查看Jsfiddle

<div class="container">
<a class="color" title="#Wicked" style=" background-color: rgb(70, 60, 65); "></a>
<a class="color" title="#Tallulah" style=" background-color: rgb(95, 58, 61); "></a>
<a class="color" title="#Merlot" style=" background-color: rgb(79, 56, 57); "></a>
<a class="color" title="#Speakeasy" style=" background-color: rgb(87, 50, 65); "></a>
<a class="color" title="#Tamarind" style=" background-color: rgb(95, 68, 74); "></a>
<a class="color" title="#Oxford" style=" background-color: rgb(101, 64, 60); "></a>
<a class="color" title="#Mulberry" style=" background-color: rgb(111, 70, 83); "></a>
<a class="color" title="#Crantini" style=" background-color: rgb(128, 81, 87); "></a>
<a class="color" title="#Sangria" style=" background-color: rgb(121, 87, 90); "></a>
<a class="color" title="#Pueblo" style=" background-color: rgb(141, 108, 109); "></a>
<a class="color" title="#Bel Ange Rose" style=" background-color: rgb(167, 123, 127); "></a>
<a class="color" title="#Foxglove" style=" background-color: rgb(200, 143, 120); "></a>
<a class="color" title="#Cactus Bloom" style=" background-color: rgb(230, 191, 164); "></a>
<a class="color" title="#Pillow Talk" style=" background-color: rgb(240, 221, 211); "></a>
</div>

脚本

 $('.color').on('mouseenter',function() {
        alert(this.title);
    });

Css

.color{height: 30px; width: 30px;display:block;}
.container{width:50%;margin:0 auto;}

- Suresh Pattu

Answer 7

Bootstrap有一些非常漂亮的工具提示：http://getbootstrap.com/javascript/#tooltips

    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
    <script>
        $('a').tooltip();
    </script>

演示 http://jsfiddle.net/wernull/fEzsy/

- Kyle Werner

---

谢谢你的建议！我会在未来的项目中研究一下（这里不能使用Bootstrap）。 - tekstrand