diff --git a/src/app/directed_acyclic_graph.ng.html b/src/app/directed_acyclic_graph.ng.html
index aa0baf9..80326b7 100644
--- a/src/app/directed_acyclic_graph.ng.html
+++ b/src/app/directed_acyclic_graph.ng.html
@@ -71,6 +71,7 @@
       [class.animate-movement]="animateMove && !graphPanning"
       [resolveReference]="resolveReference"
       (edgeLabelClick)="edgeLabelClick.emit($event)"
+      (hoveredEdgeChange)="hoveredEdgeChange.emit($event)"
     />
   </section>
 </figure>
diff --git a/src/app/directed_acyclic_graph.ts b/src/app/directed_acyclic_graph.ts
index 6bafbc3..78b8483 100644
--- a/src/app/directed_acyclic_graph.ts
+++ b/src/app/directed_acyclic_graph.ts
@@ -255,6 +255,7 @@ export class DirectedAcyclicGraph implements OnInit, OnDestroy {
   @Output() groupIterationChanged = new EventEmitter<GroupIterationRecord>();
   @Output() onGroupExpandToggled = new EventEmitter<GroupToggleEvent>();
   @Output() edgeLabelClick = new EventEmitter<DagEdge>();
+  @Output() hoveredEdgeChange = new EventEmitter<DagEdge|undefined>();
 
   @Input() hoveredEdge?: DagEdge;
 
diff --git a/src/app/directed_acyclic_graph_raw.ts b/src/app/directed_acyclic_graph_raw.ts
index 6cfee1a..07e79e7 100644
--- a/src/app/directed_acyclic_graph_raw.ts
+++ b/src/app/directed_acyclic_graph_raw.ts
@@ -407,6 +407,7 @@ export class DagRaw implements DoCheck, OnInit, OnDestroy {
   }
   @Output() selectedNodeChange = new EventEmitter<SelectedNode|null>();
   @Output() edgeLabelClick = new EventEmitter<DagEdge>();
+  @Output() hoveredEdgeChange = new EventEmitter<DagEdge|undefined>();
 
   @Input() features = createDAGFeatures();
   @Input('collapsed')
@@ -993,8 +994,10 @@ export class DagRaw implements DoCheck, OnInit, OnDestroy {
   setEdgeHover(edge: DagEdge, state: boolean) {
     if (this.hoveredEdge === edge && !state) {
       this.hoveredEdge = undefined;
+      this.hoveredEdgeChange.emit(undefined);
     } else {
       this.hoveredEdge = edge;
+      this.hoveredEdgeChange.emit(edge);
     }
     this.cdr.detectChanges();
   }