Improve hover effect on vis

src/kibana/components/vislib/styles/_svg.less

@@ -26,13 +26,15 @@
   shape-rendering: crispEdges;
 }
 
+@vis-hover-opacity: 0.65;
+
 /* SVG Element Default Styling */
 rect {
   stroke: none;
   opacity: 1;
 
   &:hover {
-    stroke: #333;
+    opacity: @vis-hover-opacity;
   }
 }
 
@@ -41,13 +43,27 @@ circle {
 
   &:hover {
     opacity: 1;
-    stroke: #333;
+    stroke-width: 10px;
+    stroke-opacity: @vis-hover-opacity;
   }
 }
 
 path {
   &:hover {
-    opacity: 1;
+    //opacity: @vis-hover-opacity;
+  }
+}
+
+.slice {
+  &:hover {
+    opacity: @vis-hover-opacity;
+  }
+}
+
+.leaflet-clickable {
+  &:hover {
+    stroke-width: 10px;
+    stroke-opacity: @vis-hover-opacity;
   }
 }
 
@@ -55,10 +71,11 @@ path {
 .line {
   circle {
     opacity: 1;
-  }
 
-  &:hover {
-    stroke: #333;
+    &:hover {
+      stroke-width: 10px;
+      stroke-opacity: @vis-hover-opacity;
+    }
   }
 }
 

src/kibana/components/vislib/visualizations/pie_chart.js

@@ -110,6 +110,7 @@ define(function (require) {
           if (d.depth === 0) { return; }
           return self.colorToClass(color(format(d, d.name)));
         })
+        .attr('class', 'slice')
         .style('stroke', '#fff')
         .style('fill', function (d) {
           if (d.depth === 0) { return 'none'; }