Question

我有一张带有个别编号设施的地图，标有点，在悬停或选择时会改变颜色。选中后，单独容器中的文本将根据选择的工具更改内容。

我也有地图下的数字图例。单击图例文本时，它还会更改容器的文本内容。单独点击点或图例可以很好地改变悬停和选定的点或图例文本的颜色。

现在我正在尝试将鼠标悬停在点击上方的效果结合起来，以触发关联的图例文字悬停/成为选中状态，反之亦然。

这是我第一次尝试jQuery，所以请理解！我大约只有一天。尽可能多地阅读 - 这可能是一个简单的解决方案，但我没有看到它。我尝试制作一个新的变量，结合点和图例文本，并通过共享设施名称链接它们，但不起作用。我认为on（bind）命令会将动作链接在一起，但这也不起作用。任何建议都会非常感激。提前谢谢！

码

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div class="map_container">
<a class="dot" style="left: 315px; top: 189px;" facility="bldg4" work="bldg4work"></a>
<a class="dot" style="left: 514px; top: 188px;" facility="bldg7" work="bldg7work"></a>
<div class="legend">
4. <a class="legt" facility="bldg4" work="bldg4work">Primary Clarifiers - West</a><br />
7. <a class="legt" facility="bldg7" work="bldg7work">Secondary Clarifiers</a><br />
</div>
</div>
<script>
$("a.dot, a.legt").on({click: function(){
$("a.dot").removeClass("selected");
$(this).addClass("selected");
$("a.legt").removeClass("selected");
$(this).addClass("selected");
var work = ".work_detail#" + $(this).attr("work");
var htmlCode = $(work).html();
$(".detail_container").fadeOut(500, function(){
$(".detail_container .work_detail").html(htmlCode);
$(".detail_container").fadeIn(500);
});
}
});
</script>
</body>
</html>

css
.map_container a.dot {
display: block;
height: 20px;
width: 20px;
background-image: url(../images/dots.png);
background-repeat: no-repeat;
background-position: 0px 0px;
cursor: pointer;
position: absolute;
}
.map_container a.dot:hover {
background-position: 0px -20px;
}
.map_container a.dot.selected {
background-position: 0px -40px;
}   
.map_container a.legt {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
color: #F00;
font-weight: bold;
text-decoration: none;
}
.map_container a.legt:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
color: #FF0;
font-weight: bold;
background-color: #630;
text-decoration: none;
}
.map_container a.legt.selected {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
font-weight: bold;
color: #0F0;
background-color: #630;
}

我试过这个悬停 - 我知道语法可能不正确，但是我关闭了吗？

    $('a.dot[facility*]').hover(function(){
    $('a.legt[facility*]').toggleClass('a.legt.hover');
    });

Answer 1

如果你需要同时更改两个元素的悬停状态，那么你需要删除伪类：hover并让jQuery为你处理。我转过身来：盘旋成一个.hover课程。然后在鼠标输入上我将类应用于点，图例和鼠标离开从两者中删除该类。我创建了一个小提琴示例（必须在点上更改背景颜色才能看到它正常工作，您可以删除该部分）。此外，对于自定义属性，您还需要使用注释中提到的数据属性。这是一个jsFiddle Example

<强> HTML

<div class="map_container">
    <a class="dot" style="left: 315px; top: 189px;" data-facility="bldg4" data-work="bldg4work"></a>
    <a class="dot" style="left: 514px; top: 188px;" data-facility="bldg7" data-work="bldg7work"></a>
    <div class="legend">
        4. <a class="legt" data-facility="bldg4" data-work="bldg4work">Primary Clarifiers - West</a><br />
        7. <a class="legt" data-facility="bldg7" data-work="bldg7work">Secondary Clarifiers</a><br />
    </div>
</div>

<强>的jQuery

$('a.dot, a.legt').on({
    mouseenter : function(){
        var facility = $(this).data('facility');
        $('a[data-facility='+facility+']').addClass("hover");
    },
    mouseleave : function(){
        var facility = $(this).data('facility');
        $('a[data-facility='+facility+']').removeClass("hover");
    },
    click: function() {
            var $this = $(this),
            facility = $this.data('facility'),
            work = $this.data('work'),
            htmlCode = $('.work_detail#'+work).html(),
            $detailContainer = $('.detail_container');

        $('a.dot, a.legt').removeClass('selected');
        $('a[data-facility='+facility+']').addClass("selected");

        $detailContainer.fadeOut(500, function() {
            $detailContainer.find(".work_detail").html(htmlCode).end().fadeIn(500);
        });
    }
});

<强> CSS

.map_container a.dot.hover {
    background-position: 0px -20px;
}
.map_container a.legt.hover {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
    color: #FF0;
    font-weight: bold;
    background-color: #630;
    text-decoration: none;
}

Answer 2

假设您需要将bldg作为facility属性的起始值。您还必须将href添加到锚点，并为锚标记添加文本。

<强> Live Demo

 $('a.dot[facility^=bldg]').hover(function(){
    $('a.legt[facility^=bldg]').toggleClass('a.legt.hover');
 });

jQuery绑定悬停和单击功能

2 个答案: