make rendition to emit mouseover/out event

examples/highlights.html

@@ -112,6 +112,18 @@
       // console.log(location);
     });
 
+    rendition.on("markMouseover", () => {
+      console.log('mouseover from rendition');
+    });
+
+    rendition.on("markMouseout", () => {
+      console.log('mouseout from rendition');
+    });
+
+    rendition.on("markClicked", () => {
+      console.log('clicked from rendition');
+    });
+  
     // Apply a class to selected text
     rendition.on("selected", function(cfiRange, contents) {
       rendition.annotations.highlight(

src/rendition.js

@@ -419,6 +419,10 @@ class Rendition {
 
 		view.on(EVENTS.VIEWS.MARK_CLICKED, (cfiRange, data) => this.triggerMarkEvent(cfiRange, data, view.contents));
 
+		view.on(EVENTS.VIEWS.MARK_MOUSEOVER, (cfiRange, data) => this.triggerMarkMouseOverEvent(cfiRange, data, view.contents));
+
+		view.on(EVENTS.VIEWS.MARK_MOUSEOUT, (cfiRange, data) => this.triggerMarkMouseOutEvent(cfiRange, data, view.contents));
+
 		this.hooks.render.trigger(view, this)
 			.then(() => {
 				if (view.contents) {
@@ -904,7 +908,7 @@ class Rendition {
 		 * @memberof Rendition
 		 */
 		this.emit(EVENTS.RENDITION.SELECTED, cfirange, contents);
-	}
+}
 
 	/**
 	 * Emit a markClicked event with the cfiRange and data from a mark
@@ -923,6 +927,14 @@ class Rendition {
 		this.emit(EVENTS.RENDITION.MARK_CLICKED, cfiRange, data, contents);
 	}
 
+	triggerMarkMouseOverEvent(cfiRange, data, contents){
+		this.emit(EVENTS.RENDITION.MARK_MOUSEOVER, cfiRange, data, contents);
+	}
+
+	triggerMarkMouseOutEvent(cfiRange, data, contents){
+		this.emit(EVENTS.RENDITION.MARK_MOUSEOUT, cfiRange, data, contents);
+	}
+
 	/**
 	 * Get a Range from a Visible CFI
 	 * @param  {string} cfi EpubCfi String

src/utils/constants.js

@@ -51,6 +51,8 @@ export const EVENTS = {
     LOCATION_CHANGED : "locationChanged",
     RELOCATED : "relocated",
     MARK_CLICKED : "markClicked",
+    MARK_MOUSEOUT: "markMouseout",
+    MARK_MOUSEOVER: "markMouseover",
     SELECTED : "selected",
     LAYOUT: "layout"
   },