在悬停图像地图上突出显示图像类答案

【问题标题】：highlight image class on hover imagemap在悬停图像地图上突出显示图像类
【发布时间】：2018-07-31 00:15:30
【问题描述】：

除了这个问题Highlight text when hover imagemap area and vice versa - using imagemapster 之外，我还在寻找一种解决方案，将类添加到图像映射之外的图像中。目的是当悬停在图像地图的一部分上时，一条线会显示在图像地图上方的图像下方。对于示例和部分工作脚本（基于上述问题）：http://jsfiddle.net/kyzho2v4/3/

jQuery(document).ready(function ($) {
    $('#house').mapster({
        mapKey: 'name',
        singleSelect: true,
        fillOpacity: 0.6,
        fillColor: 'FF0000',

        //
        onMouseover: function (evt) {
        var parts = evt.key.split('-');
        var part = parts[1];
        highlightArea(part);
        },

        //
        onMouseout: function (evt) {
        var parts = evt.key.split('-');
        var part = parts[1];
        highlightAreaX(part);
        }

     });   

        //
        $('a').hover(function () {
            var parts = $(this).closest('div').attr('class').split('-');
            var part = parts[2];
            highlightArea(part);

        });

    //
    $('a').mouseleave(function () {
        var parts = $(this).closest('div').attr('class').split('-');
        var part = parts[2];
        highlightAreaX(part);
    });


});

//
function highlightArea(key) {
$('area[name=part-' + key + ']').mouseenter();
$('a').addClass('line');
$('div.menu-item-' + key + ' a').addClass('line');
}

//
function highlightAreaX(key) {
$('area[name=part-' + key + ']').mouseout();
$('a').removeClass('line');
$('div.menu-item-' + key + ' a').removeClass('line');
}

【问题讨论】：

请不要将您的解决方案添加到您的问题中。相反，您可以通过点击下面的“回答问题”按钮来回答问题。

标签： image highlight area imagemap

【解决方案1】：

发布了 OP 的答案作为答案：

我找到了解决方案，所以对于那些正在搜索相同内容的人：我只添加了一个新的 css 类（line1）并稍微更改了 jquery 脚本：http://jsfiddle.net/88c0odmn/7/

//
function highlightArea(key) {
$('area[name=part-' + key + ']').mouseenter();

$('div.menu-item-' + key + ' a').addClass('line1');
}

//
function highlightAreaX(key) {
$('area[name=part-' + key + ']').mouseout();
$('a').removeClass('line');
$('div.menu-item-' + key + ' a').removeClass('line1');
}

【讨论】：