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

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();

演示：小提琴

在您的情况下，您进行了硬编码$('#tag-video')，而不是需要获取鼠标悬停在其上的元素，该元素在悬停回调中可作为this变量使用。

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