Question

第一个问题：当我将悬停事件放在raphael路径上时，效果将应用于每个不同的路径。因此，当我越过路径时，它会更改该单个路径的填充，在mouseout之后它应该保持填充活动颜色。如果我将悬停事件放在另一条路径上，那么最后一条路径就会出现。必须用默认颜色填充。

第二个问题：当我将悬停事件放在文本上时 - 后退路径不会填充颜色。这是我的代码。

  var paths = {
  part_1: {
    name: 'part_1',
    path: 'M194 139c-21,35 -33,76 -33,119 0,6 0,12 1,18l-125 10c-1,-9 -1,-18 -1,-28 0,-51 11,-99 30,-142 41,10 84,17 129,23z',
    img: 'images/pol.png',
    desc: "Теплые\nполы"

  },
   part_2: {
    name: 'part_1',
    path: 'M209 400l-97 78c-41,-52 -69,-116 -75,-186l125 -11c5,44 22,85 48,118z',
    img: 'images/rad.png',
    desc: 'Котлы\nи радиаторы'
  },
   part_3: {
    name: 'part_1',
    path: 'M116 483l97 -79c5,5 9,11 14,16 25,25 57,45 92,56l-36 120c-55,-18 -104,-48 -144,-87 -8,-8 -16,-17 -23,-26l0 0z',
    img: 'images/lam.png',
    desc: 'Светодиодное\n освещение'
  },
   part_4: {
    name: 'part_1',
    path: 'M454 478l36 120c-32,10 -66,15 -101,15 -35,0 -68,-5 -101,-14l36 -120c20,6 42,9 64,9 22,0 44,-3 64,-9z',
    img: 'images/pol.png',
    desc: 'Натяжные\nпотолки,\nаксессуары '
  },
   part_5: {
    name: 'part_1',
    path: 'M565 405l97 79c-7,9 -15,17 -23,25 -40,39 -89,70 -144,87l-36 -120c35,-11 66,-31 92,-56 5,-5 10,-10 14,-16l0 0z',
    img: 'images/camera.png',
    desc: 'Системы\nбезопасности'
  },
   part_6: {
    name: 'part_1',
    path: 'M666 479l-97 -80c26,-33 42,-72 47,-116l125 10c-7,70 -34,134 -75,186z',
    img: 'images/vent.png',
    desc: 'Вентиля-\nционные\nсистемы'
  },
   part_7: {
    name: 'part_1',
    path: 'M742 286l-125 -10c0,-6 1,-12 1,-18 0,-44 -12,-84 -33,-119 45,-6 88,-13 129,-23 19,44 30,92 30,142 0,10 0,19 -1,28z',
    img: 'images/auto.png',
    desc: 'Гаражные\nворота,\nрольставни'
  }
}

function labelPath( pathObj, text, textattr )
{
    if ( textattr == undefined )
    textattr = { 'font-size': 18, fill: '#722d00', stroke: '#393738', cursor: 'pointer', 'stroke-width': 0, "text-anchor":"start", 'stroke-linejoin': 'round', 'font-family': 'Arial,Helvetica,sans-serif', 'font-weight': 'bold' };
    var bbox = pathObj.getBBox();
    var textObj = pathObj.paper.text( bbox.x + bbox.width / 4, bbox.y + bbox.height / 2, text ).attr( textattr );
    return textObj;
}

$(function(){

    var r = Raphael('map', 750, 625),
        attributes = {
            fill: '#FFC000',
            stroke: '#393738',
            'stroke-width': 0,
            'stroke-linejoin': 'round',
            cursor: 'pointer'
        },
        attributes_circle = {
            fill: '#fff',
            stroke: '#393738',
            'stroke-width': 0,
            'stroke-linejoin': 'round'
        },
        attributes_line = {
            fill: '#fff',
            stroke: '#fff',
            'stroke-width': 7,
            'stroke-linejoin': 'round'
        },
        attributes_min_circle = {
            fill: '#fff',
            stroke: '#fff',
            'stroke-width': 0,
            'stroke-linejoin': 'round'
        },
        icon = {
            fill: '#FFC000',
            stroke: '#393738',
            'stroke-width': 0,
            'stroke-linejoin': 'round'
        },
        icon_inner = {
            fill: '#fff',
            stroke: '#393738',
            'stroke-width': 0,
            'stroke-linejoin': 'round'
        }
        arr = new Array();
        var id = 23;
        var a = 1;
    for (var country in paths) {

        var obj = r.path(paths[country].path);
        //Init text
        if(a <= 7){
            var path_a = r.path(paths['part_' + a].path);
            path_a.node.setAttribute("class","black_bor")
            var sst = String(paths['part_' + a].desc);
            labelPath( path_a, sst);
        }
        a++;

        //Fill stroke
        if(paths[country].name=='circle'){
            obj.attr(attributes_circle);
        }else if(paths[country].name=='line'){
            obj.attr(attributes_line);
        }else if(paths[country].name=='min_circle'){
            obj.attr(attributes_min_circle);
        }else if(paths[country].name=='icon_inner'){
            obj.attr(icon_inner);
        }else if(paths[country].name=='icon'){
            obj.attr(icon);
        }
        else{
            obj.attr(attributes);
        }
        arr[obj.id] = country;

        //Hover on element
        obj
        .hover(function(){
            if(paths[arr[this.id]].name=='part_1'){
            textattrs = { 'font-size': 18, fill: '#fff', stroke: '#393738', 'stroke-width': 0, "text-anchor":"start", 'stroke-linejoin': 'round', 'font-family': 'Arial,Helvetica,sans-serif', cursor: 'pointer', 'font-weight': 'bold' };
                var path_a = r.path(paths[arr[this.id]].path);
                path_a.node.setAttribute("class","black_bor")
                var sst = String(paths[arr[this.id]].desc);
                labelPath( path_a, sst, textattrs);
                this.animate({
                    fill: '#F3811E'
                }, 0);
                $(".img_behind").attr("src", paths[arr[this.id]].img);
            }
        }, function(){
            if(paths[arr[this.id]].name=='part_1'){
                var path_a = r.path(paths[arr[this.id]].path);
                path_a.node.setAttribute("class","black_bor")
                var sst = String(paths[arr[this.id]].desc);
                labelPath( path_a, sst);
                this.animate({
                    fill: attributes.fill
                }, 0);
            }
        })
    }
});

关于如何解决这个问题的任何想法？这是我的工作。 Whole work on jsFiddle.

Answer 1

我不明白第一个问题，你可能需要重新解释一下，哪部分不起作用？

对于第二部分，您需要添加指针事件：无以阻止它窃取事件..

text { pointer-events: none; }

jsfiddle

如果我理解第一位是正确的，我认为您需要删除悬停，只需更改悬停以删除任何现有的悬停效果？

在拉斐尔路径中应用悬停事件

1 个答案: