diff --git a/__tests__/integration/snapshots/interaction/alphabet-interval-active-scrollbar/step1.svg b/__tests__/integration/snapshots/interaction/alphabet-interval-active-scrollbar/step1.svg
index f78cb3b27c..9d2e60ab0d 100644
--- a/__tests__/integration/snapshots/interaction/alphabet-interval-active-scrollbar/step1.svg
+++ b/__tests__/integration/snapshots/interaction/alphabet-interval-active-scrollbar/step1.svg
@@ -353,24 +353,24 @@
width="608"
height="412"
/>
+
+
+
-
-
-
+
+
+
-
-
-
+
+
+
-
-
-
+
+
+
-
-
-
+
+
+
-
-
-
+
+
+
-
-
-
+
+
+
-
-
-
+
+
+
-
-
-
+
+
+
-
-
-
+
+
+
-
-
-
+
+
+
+
+
+
-
-
-
-
-
-
+
+
+
-
-
-
+
+
+
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ TotalHc
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ CurrentHc
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/__tests__/integration/snapshots/interaction/penguins-point-highlight/step0.svg b/__tests__/integration/snapshots/interaction/penguins-point-highlight/step0.svg
index e3c249facd..e12e273e71 100644
--- a/__tests__/integration/snapshots/interaction/penguins-point-highlight/step0.svg
+++ b/__tests__/integration/snapshots/interaction/penguins-point-highlight/step0.svg
@@ -399,24 +399,24 @@
width="608"
height="413"
/>
+
+
+
-
-
-
+
+
+
-
-
-
+
+
+
-
-
-
+
+
+
-
-
-
+
+
+
-
-
-
'TotalHc',
+ series: () => 'TotalHc',
+ },
+ state: {
+ active: {
+ backgroundFill: 'red',
+ backgroundFillOpacity: 1,
+ },
+ },
+ },
+ {
+ type: 'interval',
+ encode: {
+ x: 'Date',
+ y: 'CurrentHc',
+ color: () => 'CurrentHc',
+ series: () => 'CurrentHc',
+ },
+ state: {
+ active: {
+ backgroundFill: 'red',
+ backgroundFillOpacity: 1,
+ },
+ },
+ },
+ ],
+
+ interaction: {
+ elementHighlightByColor: {
+ background: true,
+ backgroundFill: 'red',
+ },
+ },
+ };
+}
+
+mockIntervalTooltipBackground.steps = ({ canvas }) => {
+ const { document } = canvas;
+ const elements = document.getElementsByClassName(ELEMENT_CLASS_NAME);
+ const [e1] = elements;
+ return [step(e1, 'pointerover')];
+};
diff --git a/src/interaction/utils.ts b/src/interaction/utils.ts
index 3075990750..189d4c13e8 100644
--- a/src/interaction/utils.ts
+++ b/src/interaction/utils.ts
@@ -433,7 +433,7 @@ export function renderBackground({
const shapeOf = isOrdinalShape() ? bandShapeOf : cloneShapeOf;
const shape = shapeOf(element, finalStyle);
shape.className = BACKGROUND_CLASS_NAME;
- element.parentNode.appendChild(shape);
+ element.parentNode.parentNode.appendChild(shape);
element.background = shape;
};