adding hover effects for the city map

changing the city section background color on hover, needed to start working with the data

diff --git a/parts/city-map.php b/parts/city-map.php
index 5ea0178..a5c2192 100644 (file)
--- a/parts/city-map.php
+++ b/parts/city-map.php
@@ -2414,7 +2414,7 @@ Nq/9FWAAOPobsiYDy64AAAAASUVORK5CYII=" transform="matrix(1 0 0 1 491.081 74.581)"
                <g>
                        <rect id="jonesville" class="city-region" x="502.226" y="85.662" fill="#6794A1" width="110" height="30"/>
                        
-                               <rect x="502.226" y="85.662" fill="none" stroke="#FFFFFF" stroke-width="1.0488" stroke-miterlimit="10" width="110" height="30"/>
+                               <rect class="city-region" x="502.226" y="85.662" fill="none" stroke="#FFFFFF" stroke-width="1.0488" stroke-miterlimit="10" width="110" height="30"/>
                </g>
        </g>
        <g class="city-region">

diff --git a/parts/map-section.php b/parts/map-section.php
index 8be3356..bc38c5d 100644 (file)
--- a/parts/map-section.php
+++ b/parts/map-section.php
@@ -41,24 +41,29 @@
 
 <script>
     jQuery(function($){
-        var map = $("#city-map");
-        var city_region = $('.city-region');
-        var text_paths = $(city_region).children('path');
         
+        let map         = $("#city-map");
+        let city_region = $('.city-region');
+        let text_paths  = $(city_region).children('path');
+        let red         = '#ed5537';
+        let blue        = '#6694a1';
+        let sibling_region;
+        
+        // hover elements
         text_paths.hover(function(){
-       
            let parent = $(this).parent();
-           let sibling = parent.next();
-        
+           let sibling = parent.prev();
+           sibling_region = sibling.children('g').find('rect');
+           sibling_region.css({"fill" :red, 'cursor' : 'pointer'});
         },function(){
-            console.log("out");
-            
+             sibling_region.css("fill", blue);
         });
         
         city_region.hover(function(){
-//           console.log($(this)) 
+            $(this).css({"fill" :red, 'cursor' : 'pointer'});
         },function(){
-//            console.log("out");
+             $(this).css("fill", blue);
         });
+        
     });
 </script>