지도 이미지에 hover 효과 (자바스크립트 아님)

작업을 하다보면 가끔 지도를 활용한 UI 작업들을 많이 하게 됩니다.

그래서 이번에는

지도 위에 마우스를 올리면 해당 지역만 색이 바뀌도록 작업을 해봤습니다.

자바스크립트 없이 CSS 만으로 가능합니다.

아래는 결과입니다.

 

 

 

지도 SVG 파일이 필요하긴 합니다.

(인터넷을 검색하거나 디자이너에게 부탁해서 SVG 파일을 받읍시다.)

 

핵심은 생각보다 간단한 CSS :hover 입니다.

#myMap path{
  fill: blue;
  cursor: pointer;
}

#myMap path:hover{
  fill: red;
}

 

 

아래는 전체 코드 입니다.

<style>

#myMap path{
  fill: blue;
  cursor: pointer;
}

#myMap path:hover{
  fill: red;
}

</style>

<svg width="298" height="448" viewBox="0 0 298 448" fill="none" xmlns="http://www.w3.org/2000/svg" id="myMap">
<g clip-path="url(#clip0_501_549)">
  <path fill-rule="evenodd" clip-rule="evenodd" d="M85.7 35.9999L87.7 34.2999L109.4 29.8999L118.3 31.4999L124.5 28.3999L155.8 29.3999L161.9 30.6999L172.7 28.8999L184.4 20.7999L184.6 11.0999L185.2 2.8999L192 0.399902L197.9 3.1999L216.3 46.4999L216.5 50.7999L247.9 94.0999L260.4 111.5L262.9 119.6L275.2 143.1L277.2 147.4V149.8L253.3 146.6L205.1 172.1L184.5 169.8L156.6 182L145.6 156.9L147.5 119.2L135.1 80.9999L117.5 53.8999L85.7 35.9999Z"/>
  <path fill-rule="evenodd" clip-rule="evenodd" d="M46.2 268.9V264.1L35.5 259.8L35.2 257L38.5 250.3L37.5 242.4L32.9 236.3L25.3 234.3L18.4 213.1L17.4 205.7H7.89998L4.59998 193.3L12.3 180L17.9 172.9L27.6 166.2L34.7 164.7L37.5 159.6L43.9 161.2L44.9 164.7L53.7 168L69.5 192.3L114.6 205.6L154.2 185.4L142.7 214.1L123.3 231.2L120.6 247.6L123.3 260.2L46.2 268.9Z"/>
  <path fill-rule="evenodd" clip-rule="evenodd" d="M35.3 316.4L33.9 314.5L34.5 305.9L44.1 299.5L46.2 292.1V283.5L38.5 278.1L38 273.3L46.2 271L123.9 262.1L139.5 289.5L136.7 303.9L133.5 325.2L120.6 328.7L112.8 316.4H35.3Z"/>
  <path fill-rule="evenodd" clip-rule="evenodd" d="M172.8 388.6L171.9 394.1L170.6 401.2L167.3 406.8L156.6 403.7L149.2 403.2V412.1L146.4 417L142.8 419.3L134.4 413.4L125.7 412.6L123.7 419L106.9 431L97.9 433.3L87.5 432.3L86 425.1L86.7 418.3L90.3 410.4L83.4 418L80.9 426.2L76 430.5L71.7 432.5L72.2 436.3L65.1 440.2L61.5 447.8H54.9L49.8 445.3L40.3 447.8L33.2 439.4L34.7 430.5L31.1 428.2L28.8 434.8L24.3 439.1L8.2 442.5L1.6 434.6L0 429.7L8.5 422.1L16.4 416V409.3L18.1 398.1L20.7 394.1L21.5 382.1L18.4 373.7H9.7L4.6 365L9.2 359.4L15.6 357.4L19.2 354.3L18.4 350.5L32.7 321.9L35.3 318.4H111.7L119.7 331L134 327.2L172.8 388.6Z"/>
  <path fill-rule="evenodd" clip-rule="evenodd" d="M290.3 302.5L283.8 328.8L279.7 330.1L278.2 339.5L271.8 344.4L270.6 350.5L265.2 358.9L256.5 370.6L238.7 371.1L225.9 368.6L226.5 373.9L228 388.7L222.6 396.1L218.6 399.4V405.5L210.9 405L208.6 400.4L202.2 395.1L199.2 400.2L194.3 399.9L189 394.6L187.2 386.2L182.1 383.9L179.3 386.4L173.6 386.2L135.5 325.8L138.7 304.3L139 302.7L211.8 322.6L225.2 306.8L270.7 293.4L290.3 302.5Z"/>
  <path fill-rule="evenodd" clip-rule="evenodd" d="M290.7 300.5L270.9 291.3L224.1 305L211.1 320.3L139.4 300.7L141.4 290.1L174.2 281.7L171.9 234.5L183.6 208.6L204.2 199.8L206.2 173.8L253.7 148.7L277.2 151.8V153.5L283.6 162.9L283.8 167L283.3 178L289.2 194L288.7 204.5L285.4 207.8L285.9 212.9L288.9 218.5L284.8 236.3L281.5 242.4L283.8 252.1L287.6 261L293.3 260.5L297.9 264.3L296.3 277.6L290.7 300.5Z"/>
  <path fill-rule="evenodd" clip-rule="evenodd" d="M204.2 174L184.8 171.9L156.9 184.1L144.4 215.3L125.1 232.2L122.7 247.5L125.4 260.7L141 288.2L172.1 280.1L169.9 234.1L182.1 207L202.3 198.4L204.2 174Z"/>
  <path fill-rule="evenodd" clip-rule="evenodd" d="M143.6 157.3L145.4 119.5L133.2 81.7999L116.1 55.3999L84.1 37.3999L74 46.1999V51.2999L60.2 68.5999L52.5 70.3999L50.5 87.1999L43.1 89.9999L35.2 83.5999L17.3 83.0999L10.9 86.8999V95.7999L16.5 98.2999L20.1 105.2L24.7 107.7L25.2 112.5L35.7 115.3L23.7 120.9L25.5 127L33.4 131.8L43.6 125.2L46.7 128L46.4 137.7L41 139L38.2 149.4L41 153.2H45.6L55.8 164.3L55.1 166.2L70.7 190.2L114.3 203L154.7 182.4L143.5 156.8L143.6 157.3ZM84.8 114.1H65.5L55.9 99.5999L59.6 93.4999L65.3 97.9999L69.4 87.9999L75.3 87.4999L78.8 76.9999L88.9 77.5999L92.3 88.4999L89.6 95.0999L94.7 95.9999L96.2 103.8L84.8 114.1Z"/>
  <path fill-rule="evenodd" clip-rule="evenodd" d="M80.2 79L76.8001 89.4L70.8001 89.9L66.2 101.2L60.2001 96.5L58.3 99.6L66.5 112.1H84L94 103.1L92.9001 97.7L86.8001 96.6L90.2 88.4L87.4001 79.4L80.2 79Z"/>
</g>
</svg>

 

(광고 클릭은 제작에 큰 힘이 됩니다.)