jquery - 获取鼠标悬停的元素的属性

Question

我正在尝试为我的网站制作一个图例系统..这是一个简单的任务...当鼠标悬停在元素上时，jquery 获取 value 属性并将该值添加到下面的 div...

我不知道如何获取该属性，因为选择返回 3 个元素...这是代码..

$(function(){
$('#legends .item')
    .mouseover(function(){
            $('#legend-tags').html($('#tag-video').attr("value")).fadeIn();
        })
    .mouseout(function(){   
            $('#legend-tags').fadeOut();
        });
});

此选择返回 3 个元素，我想获取当前鼠标悬停的元素的属性。在此测试代码中，我获取了 #tag-video 的属性，它是元素之一。

这是 HTML:

<div id="legends">
  <span>TAGS</span>
  <div id="tag-motion" class="item tag-motion" value="motion"></div>
  <div id="tag-design" class="item tag-design" value="design"></div>
  <div id="tag-video" class="item tag-video" value="video"></div>
  <div id="legend-tags">legend</div>                
</div>

这是 CSS:

#legends .item
{
    display: block;
    width: 27px;
    height: 27px;
    cursor: pointer;
    margin-bottom: 5px;    
}

#legend-tags
{
    display: none;
}

.tag-video
{
    background-image: url('../img/tag-video.svg');
}

.tag-video:hover
{
    background-image: url('../img/tag-video-over.svg');
}

.tag-design
{
    background-image: url('../img/tag-design.svg');
}

.tag-design:hover
{
    background-image: url('../img/tag-design-over.svg');
}

.tag-motion
{
    background-image: url('../img/tag-motion.svg');
}

.tag-motion:hover
{
    background-image: url('../img/tag-motion-over.svg');
}

Answer 1

您需要使用

$('#legend-tags').html($(this).attr("value")).fadeIn();

演示:Fiddle

在您的情况下，您已经硬编码了 $('#tag-video') 而不是您需要获取鼠标悬停在其上的元素，该元素在悬停回调中可用，如下所示这个变量。

注意:您的选择器中有一个类型 $('#legends .iten') 它应该是 $('#legends .item')