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

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') 进行了硬编码，而不是您需要获取鼠标悬停在其上的元素，此元素在悬停回调中作为 this 变量可用。

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

Answer 2

这样的东西有用吗？

$("div.item").hover(function(){
    $('#legend-tags').html( $(this).attr("value") ).fadeIn();
});