在网格中有~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>
似乎无法找到任何方法来抓住这个。任何提示或替代方案都有帮助!
演示Here
答案 0 :(得分:9)
试试这个:
$('.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个。
答案 1 :(得分: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
方法为mouseenter
容器内的所有mouseleave
元素附加delegated handler
到a
和#colors
个事件
参见此演示:
答案 2 :(得分:1)
答案 3 :(得分:1)
您只需使用以下代码:
$('.color').hover(function(){
var title = $(this).attr("title");
});
答案 4 :(得分:0)
$("a:hover").mouseenter(function(){
var _title = $(this).attr("title"); // Why prefix with an anchor? Maybe you need to replace....
console.log(_title);
});
答案 5 :(得分:0)
这是清理过的Html,Css和脚本 Jsfiddle Here
<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;}
答案 6 :(得分:0)
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>