在Raphael路徑中應用懸停事件

Question

第一個問題：當我將鼠標懸停在拉斐爾路徑上時，該效果適用於每個不同的路徑。所以，當我通過路徑時，它改變了單個路徑的填充，在鼠標移出後它應該保持填充活動的顏色。如果我在另一個路徑上放置懸停事件，則必須使用默認顏色填充「上次懸停路徑」。

第二個問題：當我把懸停事件放在文本上 - 返回路徑中沒有填充顏色。 這是我的代碼。

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

如果我理解第一位正確的，我想您需要刪除h，，只需更改懸停以刪除任何現有的懸停效果？