How can I make the map's regions change color when hover the mouse over it?

Question

I'm using the interactive map from codecanyon. I want to make a change so that the selected region changes color when the mouse is over it. I deployed an example where this is the code that does it.

<script type='text/javascript' src='http://www.google.com/jsapi'></script>
<script type='text/javascript'>google.load('visualization', '1', {'packages': ['geochart']});
google.setOnLoadCallback(drawVisualization);

  function drawVisualization() {var data = new google.visualization.DataTable();

 data.addColumn('string', 'Country');
 data.addColumn('number', 'Value'); 
 data.addColumn({type:'string', role:'tooltip'});var ivalue = new Array();

 var options = {
 backgroundColor: {fill:'#FFFFFF',stroke:'#FFFFFF' ,strokeWidth:25 },
 colorAxis:  {minValue: 0, maxValue: 0,  colors: []},
 legend: 'none',    
 backgroundColor: {fill:'#FFFFFF',stroke:'#FFFFFF' ,strokeWidth:25 },   
 datalessRegionColor: '#ffc801',
 displayMode: 'regions', 
 enableRegionInteractivity: 'true', 
 resolution: 'provinces',
 sizeAxis: {minValue: 1, maxValue:1,minSize:10,  maxSize: 10},
 region:'IN',
 keepAspectRatio: true,
 width:600,
 height:400,
 tooltip: {textStyle: {color: '#444444'}, trigger:'focus', isHtml: false}   
 };
  var chart = new google.visualization.GeoChart(document.getElementById('visualization')); 
  google.visualization.events.addListener(chart, 'select', function() {
  var selection = chart.getSelection();
  if (selection.length == 1) {
  var selectedRow = selection[0].row;
  var selectedRegion = data.getValue(selectedRow, 0);
  if(ivalue[selectedRegion] != '') { document.location = ivalue[selectedRegion];  }
  }
  });
 chart.draw(data, options);
 }
 </script>
 <div id='visualization'></div>

Now I want the selected region to change color like in my mockup here. Can it be done?

Answer 1

Plnkr Example

You can accomplish this with a css rule. The hover rule applies to all your paths and the rect rule excludes your ocean so that only the land areas will highlight as you indicated. Each rule is preceded by an ID selector to keep the rules only applicable to the div your map loaded within.

<style xmlns="http://www.w3.org/2000/svg">
    #visualization path:hover { fill: cornflowerblue; }
    #visualization rect:hover {fill:transparent;}
</style>