list item is highlighted when map marker is hovered

jameschildress · jameschildress · commit 515e433214a0 · 2012-11-08T12:11:47.000-05:00
diff --git a/assets/index.scss b/assets/index.scss
@@ -132,7 +132,7 @@ $text-indent: 25px;
 					border-top: $border;
 					background: transparent url("/images/city-arrow.png") no-repeat right center;
 					
-					&:hover {
+					&:hover, &.highlight {
 						background: {
 							color: $green;
 							image:  url("/images/city-arrow-hover.png"), url("/images/green-gradient.png");
diff --git a/javascripts/google_map.js b/javascripts/google_map.js
@@ -88,4 +88,18 @@ $(function(){
 	});
 	
 	
+	// Highlight a list item whenever the corresponding map marker is hovered.
+	for (i in markers){
+		google.maps.event.addListener(markers[i], 'mouseover', function() {
+			this.setIcon(markerHover);
+			links.eq(markers.indexOf(this)).addClass("highlight");
+		});
+		google.maps.event.addListener(markers[i], 'mouseout', function() {
+			this.setIcon(markerImage);
+			links.eq(markers.indexOf(this)).removeClass("highlight");
+		});
+	}
+	
+	
+	
 });
diff --git a/stylesheets/index.css b/stylesheets/index.css
@@ -93,7 +93,7 @@ a {
         text-decoration: none;
         border-top: 1px solid #e0e0e0;
         background: transparent url("/images/city-arrow.png") no-repeat right center; }
-        .wrapper .cities ul li a:hover {
+        .wrapper .cities ul li a:hover, .wrapper .cities ul li a.highlight {
           background-color: #0fd482;
           background-image: url("/images/city-arrow-hover.png"), url("/images/green-gradient.png");
           background-repeat: no-repeat, repeat-x;
