From 5606d11c4a5bc3844c4178fbb1f6016c216f308b Mon Sep 17 00:00:00 2001
From: Anthony Talarico <talarico@gaslightmedia.com>
Date: Tue, 22 Aug 2017 12:38:58 -0400
Subject: [PATCH] adding hover effects for the city map

changing the city section background color on hover, needed to start working with the data
---
 parts/city-map.php    |  2 +-
 parts/map-section.php | 25 +++++++++++++++----------
 2 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/parts/city-map.php b/parts/city-map.php
index 5ea0178..a5c2192 100644
--- 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
--- 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>
-- 
2.17.1