1

我正在尝试为我的网站制作一个图例系统.. 这是一项简单的任务...当鼠标悬停在元素上时，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');
}
4

2 回答 2

4

你需要使用

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

演示：小提琴

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

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

于 2013-03-29T02:17:05.353 回答
0

像这样的东西会起作用吗？

$("div.item").hover(function(){
    $('#legend-tags').html( $(this).attr("value") ).fadeIn();
});
于 2013-03-29T02:20:36.047 回答