It doesn't work because addMarker adds a div behind the text. try
.myCustomMouseOverHighlight {
border-bottom: 1px solid red;
position: absolute;
cursor: pointer !important;
pointer-events: auto;
}
<script src="https://ajaxorg.github.io/ace-builds/src/ace.js"></script>
<style>
.myCustomMouseOverHighlight {
border-bottom: 1px solid red;
position: absolute;
cursor: pointer !important;
pointer-events: auto;
}
</style>
<script>
var Range = ace.Range;
var editor = ace.edit(null, {value: "Hello World"});
editor.container.style.height = "100px";
document.body.appendChild(editor.container);
editor.session.addMarker(new Range(0, 1, 0, 5), "myCustomMouseOverHighlight", "text")
</script>