如何在SVG地图中添加悬停效果?

时间:2018-06-28 08:48:10

标签: jquery svg

在左边有伊朗的WVG地图,在右边有省份列表。 当我将鼠标悬停在地图上的任何省份时,它会变成红色,而在省份列表上,省份文本会变成红色。 Illustration

当列表上的名称悬停时,我希望一个省变成红色。 我做了相反的事情。

右侧省份

<a href="#" class="list-group-item list-group-item-action khorasan-razavi" data-province = 2>خراسان رضوی <span
                                        class="badge my-badge badge-primary badge-pill">14 اگهی</span></a>
                                <a href="#" class="list-group-item list-group-item-action khorasan-jonoobi" data-province = 3>خراسان جنوبی <span
                                        class="badge my-badge badge-primary badge-pill">14 اگهی</span></a>

左侧SVG地图省

<a href="index.html"><path data-toggle="tooltip" data-placement="top" class="map-province" title="خراسان رضوی" data-province = 2 data-value="خراسان رضوی" id="khorasan-razavi" d=" M 716.74 145.50 C 717.84 144.45 718.96 143.40 720.07 142.36 C 728.00 145.26 734.62 151.18 743.10 152.57 C 745.49 152.72 745.89 155.46 746.65 157.24 C 748.22 162.63 750.47 168.50 755.58 171.47 C 762.66 174.52 770.17 176.61 777.07 180.05 C 780.25 183.18 782.81 186.91 786.06 189.99 C 789.65 193.37 790.09 199.60 794.99 201.54 C 801.00 202.05 807.01 200.64 813.04 201.02 C 820.66 201.41 828.22 200.34 835.82 199.96 C 834.93 205.33 833.36 210.60 832.94 216.05 C 832.47 220.93 836.47 224.62 837.21 229.23 C 836.76 233.14 834.95 236.74 833.80 240.47 C 836.17 242.59 839.02 244.44 840.49 247.36 C 840.73 250.47 839.83 253.59 840.32 256.70 C 840.82 259.15 841.78 261.47 842.64 263.82 C 839.82 268.32 837.58 273.24 837.35 278.63 C 836.68 278.73 835.33 278.94 834.66 279.05 C 834.17 282.42 834.77 285.75 835.73 288.98 C 836.12 293.03 834.93 297.05 834.81 301.10 C 834.62 305.96 832.15 310.23 830.25 314.57 C 829.13 316.85 828.09 319.37 825.90 320.83 C 823.19 322.68 820.11 323.93 817.53 325.98 C 820.20 330.15 824.27 333.16 827.18 337.15 C 823.91 337.15 820.27 336.27 817.35 338.18 C 813.24 340.86 812.01 346.18 807.98 348.95 C 803.92 351.95 800.00 355.12 795.96 358.14 C 792.47 355.76 789.25 352.81 785.20 351.41 C 779.93 350.18 774.23 352.09 769.18 349.72 C 765.73 347.98 761.85 347.65 758.05 347.87 C 747.69 348.31 737.25 347.26 726.96 348.86 C 723.66 349.16 721.41 351.83 718.99 353.78 C 716.11 352.14 713.04 350.93 709.92 349.86 C 704.52 348.50 703.64 339.41 697.08 341.18 C 689.87 342.48 682.66 340.55 676.21 337.39 C 677.54 333.69 679.41 330.01 679.37 326.00 C 678.38 321.03 673.60 318.28 670.93 314.31 C 669.50 310.58 671.13 305.89 668.37 302.61 C 665.68 299.23 662.44 296.33 659.67 293.01 C 655.16 292.99 650.63 292.60 646.15 293.18 C 642.01 293.97 639.25 297.55 635.49 299.14 C 632.39 299.61 629.24 299.33 626.13 299.43 C 625.84 304.72 625.90 310.87 621.71 314.79 C 616.23 320.04 608.11 320.10 601.01 320.00 C 603.13 315.69 605.76 311.65 608.86 307.98 C 612.38 303.77 614.93 298.75 619.06 295.07 C 623.48 291.06 630.41 291.94 634.67 287.69 C 637.86 283.99 637.30 278.62 639.56 274.44 C 641.08 271.25 643.92 268.59 644.37 264.95 C 640.59 257.94 631.92 255.13 628.37 247.88 C 625.19 241.03 622.38 233.57 623.09 225.89 C 623.38 221.61 626.29 218.14 627.12 214.02 C 627.79 210.99 625.69 208.01 622.93 206.95 C 620.56 207.20 618.31 208.02 615.98 208.45 C 613.16 209.19 610.50 207.67 607.89 206.87 C 610.58 201.29 613.09 195.53 616.87 190.58 C 619.01 187.81 622.86 188.12 625.98 188.00 C 633.35 188.10 640.71 187.85 648.07 188.13 C 652.50 188.16 655.56 191.71 658.75 194.27 C 665.49 199.87 674.10 203.79 683.01 203.38 C 684.65 203.26 686.57 203.14 687.69 201.75 C 688.43 197.33 687.97 192.83 688.12 188.38 C 690.46 186.28 693.77 184.42 694.15 180.98 C 694.94 176.73 690.54 174.37 688.90 170.97 C 689.47 169.33 690.78 168.08 692.44 167.57 C 696.39 166.10 700.44 164.88 704.13 162.80 C 701.27 160.39 697.76 158.58 695.63 155.46 C 694.76 152.56 695.08 149.47 694.99 146.48 C 700.16 147.51 705.15 145.84 709.62 143.34 C 711.97 144.12 714.35 144.83 716.74 145.50 Z" /></a>
                        <a href="index.html"><path data-toggle="tooltip" data-placement="top" class="map-province" title="خراسان جنوبی" data-province = 3 data-value="خراسان جنوبی" id="khorasan-jonoobi" d=" M 667.98 315.38 C 671.54 318.30 675.60 321.39 676.76 326.10 C 677.19 330.42 673.64 334.52 675.09 338.81 C 677.80 341.89 682.23 342.43 686.02 343.40 C 690.73 344.61 695.57 343.48 700.34 343.63 C 703.18 346.13 704.77 350.00 708.33 351.68 C 711.83 353.31 715.43 354.86 719.19 355.81 C 722.85 354.17 725.62 350.48 729.93 350.45 C 740.25 349.61 750.63 350.15 760.98 350.03 C 764.61 349.85 767.77 351.80 771.14 352.79 C 776.85 353.73 783.38 351.77 788.39 355.53 C 791.30 357.18 794.17 361.01 797.86 359.14 C 802.29 356.97 805.56 353.09 809.73 350.50 C 809.79 354.69 809.89 358.91 810.84 363.01 C 812.16 368.31 810.94 373.75 810.71 379.11 C 817.18 383.14 824.85 383.43 832.25 383.17 C 826.11 391.51 818.22 398.98 815.06 409.11 C 813.84 412.98 816.54 416.38 818.46 419.46 C 824.25 427.89 825.15 438.34 827.72 447.97 C 829.16 455.22 832.21 462.49 830.62 469.98 C 829.18 476.62 831.13 483.27 831.42 489.92 C 831.66 494.69 832.21 499.47 833.81 504.01 C 838.68 505.34 846.45 504.74 847.62 511.12 C 849.14 515.23 845.34 518.28 843.32 521.35 C 837.89 528.04 840.53 537.12 839.86 544.98 C 839.04 552.47 842.62 559.20 845.15 565.98 C 841.95 566.51 838.56 567.61 835.37 566.58 C 831.52 563.99 830.18 559.20 827.26 555.78 C 823.74 551.12 817.97 549.37 812.93 546.93 C 810.72 546.00 808.48 544.55 805.98 544.93 C 802.87 545.39 800.00 546.75 797.08 547.82 C 788.03 551.38 778.38 553.18 769.41 556.97 C 765.68 550.36 761.52 544.00 756.93 537.95 C 753.23 533.08 750.17 527.25 744.46 524.42 C 735.65 520.02 726.77 515.70 717.53 512.28 C 708.16 509.17 699.59 504.20 690.49 500.45 C 694.53 492.22 697.80 483.54 703.01 475.93 C 704.58 473.46 706.47 470.95 706.67 467.92 C 704.48 464.92 700.64 463.58 698.61 460.48 C 697.22 455.19 698.77 449.63 697.74 444.29 C 696.81 441.26 694.33 439.09 692.13 436.95 C 687.71 432.98 683.76 428.52 680.01 423.92 C 676.49 419.40 677.50 413.29 676.99 407.96 C 676.94 403.14 674.51 398.88 672.32 394.75 C 673.81 390.69 675.34 386.64 676.73 382.54 C 672.68 382.91 668.23 383.00 664.90 385.69 C 661.59 387.99 659.31 391.78 655.42 393.20 C 653.65 393.98 652.37 392.03 651.45 390.83 C 645.95 381.85 641.38 372.30 637.68 362.44 C 637.01 360.79 638.30 359.25 638.89 357.79 C 641.28 353.37 643.36 348.79 645.31 344.16 C 648.20 337.64 649.88 330.66 653.08 324.27 C 656.23 324.00 659.67 324.33 662.49 322.61 C 665.21 321.02 666.51 318.01 667.98 315.38 Z" /></a>

0 个答案:

没有答案