创建一个显示悬停详细信息的地图

Question

]

我正在尝试创建一个地图，显示哪些州有一个健康计划。深灰色状态是具有这些程序的状态。当您将鼠标悬停在具有One Health Program的州时，我希望弹出窗口显示在州的旁边。该框包含州的名称以及该州内的一个健康计划的链接。到目前为止，我已经让这些程序填充的状态更暗，然后当你将鼠标悬停在它们上面时，它们会变成红色。我希望它们变成红色，并在它们旁边显示一个带有详细信息的框，同时将鼠标悬停在详细信息框上时保持红色。这些图片是我希望看到它的样子。我该怎么做？

以下是我的codepen文件的链接：http://codepen.io/aahmed2/pen/vGwNXv

这是代码

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"      xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="90%" height="90%" viewBox="273.184 734.576 100 100" enable-background="new 273.184 734.576 100 100"
 xml:space="preserve">

<!--States with that have One Health Programs should also be given the class of "has" to indicate that that state has a One Health Program. Along with giving that state the class of has, you must change the fill color to #333332 to change the color of that state on the map.-->

<path class="alabama" fill="#c1c0be" d="M345.738,785.184l-1.271-3.02l-0.785-2.667l-1.855,0.309c-0.088,0.013-1.99,0.284-2.496,0.318l0.158,6.178
    l0.314,3.933h0.867l0.725-0.437l-0.076-0.206l-0.416-1.106l0,0v-0.002l0.104-0.015l2.078-0.319l2.646-0.311l-0.311-1.701
    L345.738,785.184z"/>

<polygon class="arizona" fill="#c1c0be" points="302.422,774.979 294.079,773.404 293.931,774.445 293.933,775.298 293.175,775.487 292.847,774.994 
    292.335,774.994 292.491,776.86 292.178,777.33 292.825,778.95 292.008,779.604 292.008,780.242 291.365,780.883 291.365,781.441 
    291.686,781.602 291.686,782.195 291.02,782.362 290.908,782.583 297.248,786.388 301,787.013 302.424,774.985 302.422,774.985 "/> 

<polygon class="has arkansas" fill="#333332" points="334.035,783.103 334.031,783.074 334.996,781.627 334.996,780.649 335.639,780.168 335.639,779.061 
    335.951,778.592 335.809,778.166 335.469,777.826 335.615,777.24 334.453,777.24 334.133,777.4 331.869,777.4 327.777,777.559 
    327.777,777.802 327.938,779.236 328.098,780.032 328.256,783.657 329.061,783.657 329.061,784.94 332.346,784.94 334.146,784.79 
    "/>


<polygon class="has california" fill="#333332" points="284.942,766.265 286.696,760.366 280.448,758.023 280.286,759.716 279.636,760.854 279.174,761.162 
    279.174,762.049 279.495,762.369 279.495,763.398 279.174,763.719 279.174,765.262 279.815,766.063 279.815,767.172 
    280.229,767.447 280.749,767.273 280.942,767.856 280.741,768.463 280.247,768.134 280.138,768.356 280.138,769.422 
    280.952,770.074 280.757,770.664 280.427,770.664 280.306,770.907 281.573,773.921 281.915,774.773 281.581,775.108 
    281.581,775.522 282.187,776.129 282.991,776.454 283.657,776.952 283.81,777.561 284.728,777.561 285.108,777.753 285.108,778.24 
    285.579,778.563 286.552,780.199 286.706,781.581 290.961,782.212 291.525,782.07 291.525,781.701 291.205,781.541 291.205,780.816 
    291.846,780.175 291.846,779.528 292.632,778.899 292.016,777.357 "/>

<polygon class="colorado" fill="#c1c0be" points="315.105,767.447 311.969,767.134 308.281,766.813 303.865,766.341 303.615,768.024 302.605,774.844 
    313.104,775.957 314.789,775.957 315.105,769.458 "/>



<polygon class="connecticut" fill="#c1c0be" points="360.982,760.627 361.432,762.274 363.285,761.039 363.871,761.039 363.871,760.808 363.568,759.451 
    360.982,760.06 "/>

<polygon class="delaware" fill="#c1c0be" points="360.502,768.368 359.219,766.924 359.219,766.753 359.145,766.605 359.217,767.041 359.525,768.579 
    360.502,768.579 "/>

<polygon class="has florida" fill="#333332" points="341.395,789.342 341.545,789.742 343.424,789.43 343.924,789.597 345.072,789.759 345.717,790.887 
    346.279,791.027 347.561,789.747 348.586,789.918 349.727,790.895 351.037,791.713 351.037,793.065 350.725,793.534 
    350.844,793.891 351.098,793.763 351.648,793.763 351.84,794.146 351.84,795.104 352.287,795.848 352.785,795.848 352.951,796.515 
    353.271,796.675 353.588,797.784 354.369,797.94 355.174,798.907 355.615,799.054 356.518,798.903 356.811,798.317 356.652,795.152 
    356.346,794.689 354.73,792.431 354.57,791.47 353.127,789.535 352.502,787.507 351.664,787.507 351.504,788.31 349.994,788.31 
    346.273,788.471 345.795,787.993 341.123,788.615 "/>

<polygon class="has georgia" fill="#333332" points="344.234,779.325 343.838,779.457 344.617,782.11 345.91,785.178 345.586,786.149 345.898,787.869 
    346.338,788.308 349.992,788.148 351.373,788.148 351.533,787.347 352.48,787.347 352.48,785.317 352.811,784.824 352.953,784.391 
    352.654,783.942 352.17,783.46 352.012,782.981 349.621,780.91 348.834,779.967 348.357,779.967 347.99,779.6 347.99,779.005 
    345.992,779.005 "/>

<polygon class="idaho" fill="#c1c0be" points="294.058,752.704 294.579,753.4 294.407,754.259 292.671,756.154 292.968,756.608 293.136,757.284 
    292.804,757.782 292.006,761.454 295.313,762.252 296.273,762.484 300.686,763.43 301.779,757.804 301.391,757.675 300.91,757.83 
    298.932,757.83 298.602,757.006 298.27,756.841 297.953,754.783 297.59,754.783 297.391,755.183 296.975,754.559 297.148,753.704 
    297.758,752.484 296.82,751.858 296.82,750.902 296.184,750.585 296.018,749.259 296.018,748.093 296.344,747.767 296.488,746.902 
    295.354,746.619 294.832,748.65 293.804,752.663 "/>

<path class="has illinois" fill="#333332" d="M334.676,765.313l-0.504,0.838l-0.799,0.479l-0.113,0.229l0.311,0.155l-0.193,0.57l-0.475,0.631l-0.15,0.452
    l0.154,1.396l1.277,1.116l0.152,0.461l0.66,0.164v1.044l-0.148,0.297l0.277,0.415l0.803,0.16l0.348,0.528l0.463,1.389h0.23
    l0.127-0.128l0.178-0.354h0.805l0.768-1.385v-0.964l0.488-0.811l0.15-0.602l-0.156-0.312l0.004-0.686l0.145-0.435l-0.148-0.148
    v-1.143l-0.156-0.469l-0.164-0.976v-1.757l-0.92-1.685c-0.498,0.021-3.426,0.236-4.133,0.288l0.721,0.865V765.313z"/>

<polygon class="indiana" fill="#c1c0be" points="340.521,773.391 341.412,773.242 341.412,772.749 341.848,772.749 342.15,773.052 342.387,772.935 
    342.551,772.3 343.018,771.679 343.018,771.306 343.705,771.306 343.98,771.031 343.98,770.269 343.188,764.889 341.662,764.889 
    340.227,765.227 339.922,765.53 339.168,765.53 339.168,767.215 339.326,768.164 339.488,768.659 339.488,769.748 339.66,769.92 
    339.488,770.436 339.488,771.046 339.652,771.376 339.477,772.068 339.008,772.852 339.008,773.612 339.035,773.557 "/>

<polygon class="iowa" fill="#c1c0be" points="329.305,762.162 324.41,762.319 324.41,764.087 324.41,764.247 324.41,764.313 325.047,766.064 
    325.518,768.418 332.203,768.418 332.441,768.498 332.619,768.558 332.768,768.129 333.24,767.498 333.375,767.095 333.045,766.93 
    333.252,766.517 334.055,766.033 334.516,765.268 334.516,764.999 333.74,764.068 332.936,763.582 332.59,763.238 332.59,762.082 
    332.578,762.006 "/>

  <polygon class="has kansas" fill="#333332" points="327.457,771.907 326.828,771.435 326.648,770.898 326.947,770.299 326.684,770.163 326.521,770.024 
    323.529,769.941 320.477,769.861 315.262,769.546 314.992,775.065 314.949,775.961 320.805,776.278 327.457,776.278 "/>
<polygon fill="#AFBEC6" points="326.684,770.163 326.947,770.299 326.648,770.898 326.953,770.29 326.557,770.026 326.521,770.024 
    "/>

  <polygon class="kentucky" fill="#c1c0be" points="337.242,776.383 336.992,776.759 338.914,776.759 340.027,776.442 342.283,776.118 344.852,775.797 
    346.277,775.64 346.627,775.406 346.627,775.406 347.697,774.692 349.203,773.036 348.486,772.557 347.99,771.894 347.99,771.306 
    347.715,771.306 347.268,770.857 346.98,771.146 345.951,771.146 345.791,770.984 345.141,770.984 344.814,770.495 344.141,770.36 
    344.141,771.098 343.773,771.466 343.178,771.466 343.178,771.733 342.689,772.384 342.525,773.045 342.119,773.248 
    341.781,772.909 341.574,772.909 341.574,773.378 340.543,773.55 339.139,773.706 338.998,773.987 338.193,775.276 338.172,775.315 
    338.168,775.315 337.371,775.315 337.242,775.575 "/>

  <path class="louisianna" fill="#c1c0be" d="M332.354,785.101h-3.293v1.989l0.475,1.107l0.662,1.155l-0.49,0.815l0.158,0.788l-0.004,0.013l0,0
    c-0.012,0.082-0.057,0.33-0.117,0.58l-0.051,0.244l-0.051,0.104c-0.012,0.036-0.027,0.07-0.039,0.102l1.654,0.006l0.779,0.313
    l0.924-0.153l0.521-0.349l0.367,0.367l0.631,0.788l0.588,0.146l0.639-0.32l0.809,0.162l0.406-0.136v-0.59l0.926,0.74l0.582,0.292
    l0.256-0.257v-0.388l-1.123-0.321v-0.414l0.176-0.175l0.283-0.566l-0.443-0.296l-0.318-0.797l-0.33-0.164l-0.154-0.922l-0.721,0.145
    l-2.502,0.167l0.002-0.746l0.326-1.306l0.645-0.644l0.141-0.424l-0.471-0.627l0,0v-0.002v-0.023l-0.037-0.555L332.354,785.101z"/>

<polygon class="maine" fill="#c1c0be" points="365.658,754.486 366.283,753.704 366.445,753.055 367.748,751.915 368.66,751.003 368.393,750.603 
    367.746,750.44 367.424,749.799 366.789,749.64 366.439,749.105 366.119,747.672 365.66,746.751 365.092,746.609 364.281,747.258 
    363.932,747.084 363.525,747.084 363.068,748.301 363.068,749.57 363.23,751.028 362.752,751.985 363.227,753.881 363.701,755.146 
    364.559,756.433 364.84,755.304 " />      

<path class="has maryland" fill="#333332" d="M358.898,766.036c-0.568,0.153-2.57,0.692-4.146,1.099h0.58l0.332,0.499l0.25,0.125l0.016-0.016l0.047,0.048
    l0.088,0.044l-0.021,0.021l0.088,0.087l0.822,0.164l0.186,0.557l-0.166,0.334v0.239l0.572,0.144h0.662l-0.271-0.554l-0.16-1.604     l0.152-0.041l0.795,1.747l0.787,0.629l0.129,0.13l0.703-0.281v-0.667h-0.947l-0.496-2.471V766.036z
M352.824,767.603l0.254,0.888l0.723-0.865l0.631-0.158l0.143-0.287
    C353.76,767.389,353.086,767.555,352.824,767.603z"/>

<polygon class="massachusetts" fill="#c1c0be" points="362.049,758.31 361.969,758.346 361.963,758.322 360.982,758.462 360.982,759.894 364.088,759.117 
    364.133,759.102 364.164,759.135 364.941,759.756 365.451,759.756 365.613,760.237 366.084,760.237 365.941,759.806 
    366.615,759.302 366.746,759.039 366.475,758.633 366.186,758.633 366.506,759.114 365.85,759.114 365.186,758.617 364.664,758.096 
    364.816,757.482 364.434,757.354 362.119,758.278 362.123,758.299 "/>

<polygon class="michigan" fill="#c1c0be" points="345.584,764.26 345.584,763.335 346.547,762.212 346.547,761.299 346.229,760.657 345.912,759.396 
    345.664,759.147 345.4,759.411 344.4,760.577 343.994,760.374 343.811,759.824 344.475,758.829 344.621,758.68 344.621,757.783 
    344.301,757.463 344.301,756.846 343.873,756.703 343.217,756.536 342.434,756.066 342.158,756.066 341.734,756.35 341.734,756.982 
    341.566,757.149 341.41,757.771 341.23,758.312 340.58,758.312 340.451,758.571 340.451,759.373 340.129,760.016 340.129,761.101 
    340.441,761.726 340.771,762.218 340.771,763.865 340.447,764.514 340.352,765.016 341.654,764.729 343.244,764.729 
    343.713,764.572 "/>

<polygon class="michigan" fill="#c1c0be" points="337.838,757.716 338.715,756.4 339.195,756.239 339.525,755.745 340.188,755.745 341.002,755.257 
    341.502,755.423 342.717,755.271 342.854,754.859 342.717,754.313 341.826,754.461 341.275,754.463 341.121,754.002 
    339.771,754.452 339.281,754.943 338.096,754.943 337.301,754.307 336.279,754.477 336.279,753.874 336.719,753.288 
    336.533,753.194 335.109,754.455 333.76,755.055 334.316,755.75 335.596,755.91 335.752,756.066 336.709,756.066 337.551,756.739 
    337.551,756.74 337.557,756.744 337.561,756.767 337.719,757.244"/>

  <polygon class="has minnesota" fill="#333332" points="324.248,756.982 324.248,757.031 324.201,757.029 323.785,757.446 323.914,757.703 324.41,758.198 
    324.41,762.159 328.979,762.002 332.551,761.847 332.436,761.16 331.025,759.907 330.029,759.575 329.865,757.787 329.693,757.615 
    329.875,756.894 330.506,756.578 330.506,755.314 330.506,755.302 330.531,755.284 331.809,753.848 332.951,752.707 
    334.125,752.056 333.119,752.056 332.797,751.735 332.369,751.735 332.047,751.896 331.203,751.896 330.734,751.583 
    330.232,751.751 329.895,751.247 328.994,751.097 328.68,751.254 328.154,751.254 326.711,750.291 323.447,750.291 323.447,752.288 
    324.248,755.985 324.248,756.87 324.357,756.873 "/>

  <polygon class="has mississippi" fill="#333332" points="335.746,780.287 335.156,780.729 335.156,781.677 334.197,783.117 334.348,784.773 334.355,784.772 
    334.355,784.855 334.361,784.934 334.355,784.934 334.355,785.475 334.846,786.129 334.666,786.668 334.025,787.308 333.713,788.56 
    333.713,789.105 336.033,788.95 336.906,788.775 337.074,789.779 337.387,789.935 337.709,790.742 338.094,790.999 338.234,790.715 
    339.365,790.715 339.646,790.292 339.328,786.311 339.17,780.132 336.34,780.26 "/>

  <path class="has missouri" fill="#333332" d="M326.578,769.861l0.021,0.001l0.498,0.331l0.066,0.033l-0.342,0.684l0.141,0.426l0.654,0.49v4.526l0.07,0.49
    c0.006,0.034,0.012,0.067,0.016,0.1c0.041,0.235,0.064,0.373,0.074,0.455l3.928-0.157h0.16h2.23l0.32-0.16h1.406l-0.176,0.697
    l0.303,0.302l0.098,0.292l0.238-0.599l0.154-0.622v-0.023l0.008-0.008l0.332-0.33l0.303-0.456v-0.583l-0.047,0.047h-0.412
    l-0.496-1.488l-0.297-0.445l-0.801-0.16l-0.365-0.548l0.172-0.345v-0.881l-0.623-0.156l-0.168-0.502l-1.291-1.13l-0.158-1.423
    l-0.42-0.14h-6.621l0.129,0.517L326.578,769.861z"/>

  <polygon class="montana" fill="#c1c0be" points="301.967,756.854 301.969,756.854 301.969,756.854 307.982,757.993 312.691,758.463 312.699,758.384 
    312.854,756.543 312.852,756.543 312.861,756.458 312.867,756.382 312.867,756.382 313.182,753.251 313.338,749.801 
    309.561,749.328 305.068,748.687 299.291,747.563 296.645,746.94 296.494,747.844 296.178,748.159 296.178,749.249 296.332,750.479 
    296.98,750.803 296.98,751.772 297.965,752.43 297.297,753.767 297.145,754.525 297.371,754.864 297.492,754.623 298.092,754.623 
    298.416,756.734 298.727,756.89 299.039,757.67 300.896,757.67 301.391,757.506 301.811,757.646 301.953,756.936 "/>

<polygon class="has nebraska" fill="#333332" points="312.373,762.969 312.063,766.982 315.266,767.303 315.266,769.385 320.645,769.701 323.525,769.781 
    326.211,769.853 325.559,769.198 325.541,769.185 325.42,768.702 325.389,768.579 325.387,768.579 325.373,768.516 325.35,768.418 
    325.354,768.418 324.893,766.107 324.248,764.327 324.248,764.247 323.986,764.247 323.188,763.769 321.744,763.93 320.938,763.444 
    317.107,763.284 "/>

  <polygon class="nevada" fill="#c1c0be" points="292.326,776.818 292.16,774.834 292.933,774.834 293.245,775.305 293.772,775.173 293.772,774.433 
    293.923,773.375 293.917,773.374 293.935,773.295 293.944,773.216 293.95,773.218 296.164,762.622 291.586,761.518 286.849,760.412 
    285.116,766.24 292.088,777.174 "/>

  <polygon class="newhamphire" fill="#c1c0be" points="362.105,753.007 362.105,753.566 362.271,754.067 361.943,754.725 361.785,756.782 362.082,758.119 
    363.438,757.517 364.363,757.208 364.506,756.643 363.555,755.212 363.074,753.93 362.623,752.133 362.105,752.65 "/>

  <polygon class="newjersey" fill="#c1c0be" points="359.373,763.969 360.047,764.641 359.07,765.943 359.328,766.591 359.449,766.47 360.395,767.101 
    360.986,766.063 361.145,765.273 361.143,764.498 360.992,763.888 360.645,763.541 360.844,763.145 361.143,762.994 
    361.143,762.624 359.791,762.255 359.506,762.192 359.221,763.051 "/>

  <polygon class="newmexico" fill="#c1c0be" points="308.279,775.636 302.584,775.003 301.16,787.035 302.461,787.18 302.773,786.4 303.311,786.221 
    305.48,786.686 305.48,786.218 312.223,786.699 312.859,776.994 312.859,776.994 312.865,776.92 312.873,776.92 313.008,776.108 "/>

  <polygon class="has newyork" fill="#333332" points="360.822,758.426 360.51,758.111 360.197,756.708 359.869,756.708 359.701,755.364 359.379,754.543 
    359.379,753.849 357.42,754.452 355.408,756.771 355.85,757.065 355.85,758.271 354.355,759.434 351.869,759.589 352.334,760.984 
    351.197,761.958 351.197,762.621 354.326,761.841 354.951,761.841 356.893,761.039 357.875,761.042 358.563,761.214 
    358.723,761.853 359.406,761.989 359.406,761.984 359.477,762.004 359.564,762.021 359.563,762.026 359.832,762.1 360.117,762.163 
    361.242,762.485 361.305,762.502 361.305,762.502 361.305,762.981 361.848,763.117 363.639,761.774 363.471,761.691 
    362.047,762.482 361.408,762.482 361.336,762.531 361.324,762.482 361.324,762.482 360.822,760.638 360.822,760.099 
    360.822,759.933 "/>

  <polygon class="has northcarolina" fill="#333332" points="350.396,775.43 350.396,775.436 350.369,775.456 350.051,775.773 349.057,776.435 348.592,776.59 
    347.459,777.556 346.672,777.87 346.064,778.477 346.064,778.845 348.047,778.845 349.002,778.209 349.834,777.882 351.426,777.882 
    351.941,777.71 352.32,778.09 352.32,778.523 352.688,778.523 353.004,778.207 354.17,778.041 354.846,778.21 356.281,779.486 
    356.557,779.486 357.344,779.172 357.775,779.027 357.775,778.41 359.109,777.086 359.859,776.785 359.859,776.392 359.387,775.913 
    359.182,775.502 360.541,775.163 360.811,774.894 360.678,774.497 360.248,774.354 359.219,774.354 359.219,774.063 
    359.885,773.729 360.174,773.298 360.049,772.931 358.201,773.547 350.396,774.981 "/>

  <polygon class="northdakota" fill="#c1c0be" points="313.029,756.393 318.238,756.708 324.088,756.866 324.088,755.994 323.77,754.56 323.287,752.297 
    323.287,750.289 318.23,750.132 313.498,749.815 313.342,753.423 "/>

  <polygon class="has ohio" fill="#333332" points="344.131,770.195 344.91,770.351 345.225,770.824 345.857,770.824 346.018,770.984 346.914,770.984 
    347.268,770.63 347.783,771.146 347.99,771.146 348.15,771.146 348.33,771.146 348.633,770.084 348.645,770.04 349.113,769.884 
    349.113,769.257 350.092,768.604 350.398,767.994 350.547,766.351 350.238,764.191 349.805,763.323 348.256,764.403 
    347.268,764.729 346.287,764.729 345.65,764.411 343.752,764.728 343.346,764.863 "/>

  <path class="oklahoma" fill="#c1c0be" d="M327.779,779.261l-0.162-1.45v-0.246l-0.174,0.007l0.17-0.126l-0.082-0.568
    c-0.033-0.195-0.059-0.345-0.068-0.438h-6.662l-5.939-0.32h-1.682v0.807l4.953,0.319l0.182,0.547l-0.16,3.818l0.424,0.282h0.813
    l0.49,0.492l0.922,0.308l0.664-0.166l0.494,0.494l1.086,0.155l1.311-0.164l0.314,0.313l0.434-0.145l0.975-0.163l0.977-0.001h0.021
    l1.014,0.58l-0.154-3.545L327.779,779.261z"/>

  <polygon class="has oregon" fill="#333332" points="292.341,757.706 292.642,757.255 292.493,756.661 292.146,756.139 293.938,754.184 294.087,753.439 
    293.647,752.852 292.716,752.696 290.951,752.056 289.361,752.056 289.039,752.056 287.4,751.887 286.774,751.575 285.808,751.575 
    285.485,751.575 284.931,751.204 285.255,750.392 284.798,749.926 284.655,749.643 284.108,749.552 283.663,751.036 
    282.054,754.416 280.778,756.331 280.778,757.855 287.143,760.241 291.561,761.272 292.17,758.535 "/>

  <polygon class="has pennsylvania" fill="#333332" points="351.02,767.61 352.617,767.465 352.615,767.455 352.717,767.455 358.93,765.861 359.834,764.656 
    359.225,764.045 359.057,763.037 359.35,762.157 358.641,762 358.592,761.99 358.592,761.989 358.592,761.989 358.43,761.346 
    357.846,761.199 356.908,761.199 354.967,762.002 354.336,762.002 351.037,762.826 351.037,762.114 349.932,763.22 350.227,763.816 
    350.395,764.154 350.395,764.155 350.395,764.155 350.396,764.157 350.717,766.25 350.717,766.26 350.709,766.348 350.715,766.397 
    "/>

  <polygon class="has rhodeisland" fill="#333332" points="363.725,759.407 364.006,760.681 364.512,760.428 364.512,759.709 364.09,759.286 "/>

  <polygon class="southcarolina" fill="#c1c0be" points="348.15,779.533 348.424,779.807 348.91,779.807 349.734,780.799 351.65,782.392 352.137,782.878 
    352.148,782.889 352.15,782.892 352.15,782.892 352.311,783.373 352.779,783.841 353.086,784.299 353.297,784.299 353.451,783.541 
    353.635,783.176 354.293,783.176 354.727,782.741 354.727,782.26 355.23,781.755 355.689,781.449 355.689,780.823 356.572,779.646 
    356.221,779.646 354.77,778.356 354.162,778.204 353.08,778.358 352.756,778.685 352.16,778.685 352.16,778.156 351.898,777.894 
    351.439,778.043 349.85,778.043 349.07,778.354 348.15,778.968 "/>

  <polygon class="has southdakota" fill="#333332" points="312.865,758.48 312.867,758.48 312.859,758.56 312.854,758.641 312.85,758.641 312.387,762.808 
    320.965,763.284 320.984,763.286 320.984,763.286 320.984,763.286 321.781,763.764 323.225,763.604 324.031,764.087 
    324.248,764.087 324.248,762.325 324.248,762.165 324.248,758.265 323.777,757.786 323.59,757.414 323.98,757.023 318.23,756.868 
    313.014,756.552 "/>

  <path class="tennessee" fill="#c1c0be" d="M346.799,775.483l-0.465,0.311l0,0l0,0l-0.016,0.002h-0.002l-6.256,0.802l-0.053,0.016l-1.07,0.307h-0.01
    h-2.053l-0.273,0.273l-0.008,0.319l-0.469,1.095l0.002,0.008l-0.018,0.027l-0.08,0.187l-0.014-0.045l-0.217,0.326v1.014l2.105-0.096
    l1.262-0.057v-0.005h0.08l4.475-0.64l0.475-0.157l1.709-0.312v-0.448l0.691-0.683l0.791-0.316l1.139-0.969l0.469-0.155l1.242-0.932
    v-0.343c-0.473,0.093-2.533,0.489-3.244,0.489C346.906,775.502,346.846,775.496,346.799,775.483z"/>

  <path class="has texas" fill="#333332" d="M328.9,783.817h-0.637l0.002,0.062l-0.107-0.062l0,0h-0.055l-0.002-0.032l-1.066-0.609h-0.941l-0.787,0.158
    l-0.635,0.159l-0.043,0.015l-0.004-0.003l-0.324-0.325l-1.256,0.157l-1.16-0.166l-0.467-0.468l-0.621,0.155l-1.002-0.335
    l-0.471-0.471h-0.795l-0.537-0.359l0.16-3.88l-0.139-0.416l-4.998-0.317l-0.643,9.79l-0.08-0.006l-6.652-0.475v0.362l3.041,3.039
    l0.479,1.916l2.494,1.56l0.426-0.283l0.807-1.293l0.529-0.177l1.646,0.33l1.154,0.989l0.488,1.303l0.793,1.425l1.131,1.294
    l0.162,0.971l0.943,1.57l1.244,0.623h1.148l0.32,0.481h0.357v-0.882l-0.322-2.094l0.488-1.304l0.506-0.995l0.979-0.816l0.984-0.164
    l0.932-0.001l0.297-0.446l0.621-0.623l-0.162-0.813l0.602-0.4l0.33,0.66l0.416-0.139l0.928-0.465l0.096-0.19
    c0.035-0.107,0.072-0.244,0.107-0.389l0.096-0.483l-0.164-0.817l0.475-0.788l-0.619-1.082l-0.492-1.163v-2.005v-0.16V783.817z"/>

  <polygon class="utah" fill="#c1c0be" points="300.338,765.675 300.336,765.675 300.35,765.598 300.658,763.588 296.32,762.658 294.108,773.247 
    302.445,774.82 303.465,767.946 303.705,766.316 300.338,765.675 "/>

<polygon class="vermont" fill="#c1c0be" points="361.93,758.165 361.623,756.794 361.793,754.667 362.1,754.055 361.945,753.58 361.945,753.189 
    360.762,753.337 359.539,753.796 359.539,754.527 359.859,755.334 360.012,756.548 360.326,756.548 360.654,758.031 
    360.932,758.307 "/>

  <polygon class="virginia" fill="#c1c0be" points="355.113,767.943 354.59,768.073 354.736,768.514 354.697,768.563 353.564,770.011 352.791,770.475 
    352.629,771.109 352.32,771.57 352.32,772.553 352.32,772.555 352.273,772.583 350.971,773.39 349.975,773.556 349.947,773.536 
    349.336,773.127 347.793,774.82 347.08,775.297 350.299,774.836 358.162,773.392 359.988,772.782 359.73,772.268 358.945,772.268 
    358.393,771.717 358.719,771.229 358.205,770.542 358.646,770.396 358.137,770.013 357.33,769.688 356.859,769.375 356.813,769.363 
    356.813,769.343 356.813,768.96 356.967,768.652 356.832,768.247 356.051,768.091 356.039,768.079 355.91,767.99 355.619,768.281 
    "/>

<path class="has washington" fill="#333332" d="M285.083,749.497l0.172,0.346l0.508,0.507l-0.176,0.528l-0.133,0.269l0.4,0.268h0.959h0.319l0.646,0.323
    l1.588,0.159h1.598l0,0h0.334l1.778,0.646l0.568,0.094l1.554-6.059l-5.381-1.582l-2.281-0.912l0.143,0.848l-0.322,0.643l0.164,1.138
    l-0.498,0.496l-0.337,1.015l-0.789-0.197l0.191-0.909l0.451-0.602l-0.293-0.586c-0.668-0.668-1.428-1.377-1.549-1.412
    c-0.064,0.001-0.25,0.139-0.391,0.275v0.769l-0.16,1.612v1.288l-0.301,0.886l0.148,0.024l0.016-0.052L285.083,749.497z"/>

  <polygon class="westvirginia" fill="#c1c0be" points="355.607,767.785 355.555,767.758 355.246,767.295 354.697,767.295 354.541,767.604 353.891,767.768 
    353.008,768.826 352.662,767.621 350.896,767.782 350.67,766.88 350.549,768.053 350.217,768.713 349.273,769.343 349.273,770 
    348.779,770.164 348.629,770.764 348.467,771.249 348.451,771.306 348.449,771.306 348.15,771.306 348.15,771.84 348.605,772.448 
    349.338,772.887 349.344,772.882 349.398,772.923 349.479,772.972 349.471,772.979 350.016,773.386 350.471,773.311 
    350.926,773.234 351.395,772.923 352.16,772.463 352.16,771.521 352.486,771.031 352.652,770.371 353.469,769.882 353.941,769.252 
    354.557,768.482 354.383,767.96 355.143,767.771 355.6,768.074 355.775,767.898 "/>

  <polygon class="wisconsin" fill="#c1c0be" points="332.75,761.838 332.75,761.913 332.768,761.997 332.75,761.997 332.75,763.171 333.041,763.462 
    333.813,763.925 338.07,763.609 337.883,760.621 338.207,759.972 338.365,758.862 338.459,758.402 338.189,758.761 337.402,759.548 
    337.402,758.68 337.717,758.366 337.41,756.833 336.652,756.227 335.686,756.227 335.521,756.063 334.232,755.901 333.59,755.099 
    332.498,754.942 332.029,754.787 331.102,755.096 330.666,755.388 330.666,756.678 330.012,757.004 329.871,757.565 330.02,757.714 
    330.18,759.456 331.119,759.776 332.584,761.078 332.59,761.105 332.736,761.838 "/>

<polygon class="wyoming" fill="#c1c0be" points="300.521,765.547 302.49,765.922 303.809,766.173 303.84,766.177 311.904,766.967 311.955,766.31 
    312.213,762.959 312.209,762.959 312.219,762.876 312.225,762.798 312.227,762.798 312.674,758.623 307.959,758.151 
    302.096,757.043 "/>

</svg>

我的CSS

.has:hover {
fill: #d00000;
}

Answer 1

我试试：

添加HTML：

<div id="hasBox">Test</div>

关于CSS：

#hasBox {
  display: none;
  position: absolute;
  width: 80px;
  heigth: 50px;
  background-color: rgba(200,200,200,0.7);
}

在JavaScript上：

var svg = document.getElementById("Layer_1");
var arrHas = svg.getElementsByClassName("has");
var box = document.getElementById("hasBox");
for(idx=0; idx < arrHas.length; idx++){
   var obj = arrHas[idx];
   obj.addEventListener("mouseenter", function(mouse){ 
       mouse.stopPropagation();
       box.innerHTML = mouse.currentTarget.getAttribute("class").replace("has","*");
       console.log(mouse.clientX+"|"+mouse.clientY);
       box.style.top = mouse.clientX + "px";
       box.style.left = mouse.clientY + "px";
       box.setAttribute("style", "display:block;");
     }, false);

    obj.addEventListener("mouseleave", function(){ 
         box.innerHTML = " ";
         box.setAttribute("style", "display:none;");
    }, false);
 }

希望它有所帮助，我稍后会发布一些更好的东西......