diff --git a/src/util/graphic.js b/src/util/graphic.js
index b9abeeba10256e21a4d97f2e3267a334518bcd19..e490f76d376150c6e785e237499ed0015b471c56 100644
--- a/src/util/graphic.js
+++ b/src/util/graphic.js
@@ -376,15 +376,13 @@ function doSingleLeaveHover(el) {
             // `setStyle` but not `extendFrom(stl, true)`.
             el.setStyle(normalStl);
             applyDefaultTextStyle(style);
-            el.__cachedNormalStl = null;
         }
         // `__cachedNormalZ2` will not be reset if calling `setElementHoverStyle`
         // when `el` is on emphasis state. So here by comparing with 1, we try
         // hard to make the bug case rare.
         var normalZ2 = el.__cachedNormalZ2;
-        if (el.z2 - normalZ2 === Z2_LIFT_VALUE) {
+        if (normalZ2 != null && el.z2 - normalZ2 === Z2_LIFT_VALUE) {
             el.z2 = normalZ2;
-            el.__cachedNormalZ2 = null;
         }
     }
 }
diff --git a/test/hoverStyle.html b/test/hoverStyle.html
index a34f6c2459b7f827e404a7afbdb30b8c2a837f4d..d1273d7813ed591fa3fdb6360ce2155c40264988 100644
--- a/test/hoverStyle.html
+++ b/test/hoverStyle.html
@@ -56,6 +56,7 @@ under the License.
 
         <div id="mainb1"></div>
         <div id="mainb2"></div>
+        <div id="mainb3"></div>
 
         <div id="main0"></div>
         <div id="main1"></div>
@@ -84,7 +85,9 @@ under the License.
 
             function genInfo(zrRefreshTimestamp) {
                 infoEl.innerHTML = [
-                    useHoverLayer ? 'Using HoverLayer' : 'NOT using HoverLayer',
+                    '<span style="color:yellow">'
+                        + (useHoverLayer ? 'Using HoverLayer' : 'NOT using HoverLayer')
+                    + '</span>',
                     'hoverLayerThreshold: ' + hoverLayerThreshold,
                     'zr refresh base layer at: <span style="color:yellow">' + (zrRefreshTimestamp || null) + '</span>'
                 ].join('<br>');
@@ -231,6 +234,37 @@ under the License.
 
 
 
+        <script>
+            require(['echarts'], function (echarts) {
+                var option = {
+                    hoverLayerThreshold: hoverLayerThreshold,
+                    xAxis: {
+                    },
+                    yAxis: {
+                    },
+                    series: [{
+                        type: 'scatter',
+                        symbolSize: 100,
+                        data: [
+                            {value: [0, 0], itemStyle: {color: 'blue'}},
+                            {value: [0, 1], itemStyle: {color: 'red'}}
+                        ]
+                    }]
+                };
+
+                var chart = testHelper.create(echarts, 'mainb3', {
+                    title: [
+                        'hover the blue symbol, the z2 can be top',
+                        'unhover, **z2 should be back** to bottom'
+                    ],
+                    option: option,
+                    height: 200
+                });
+            });
+        </script>
+
+
+
         <script>
             require(['echarts'], function (echarts) {
                 var option = {