this is what I want

js/annot.js

 $(function(){
-    var annotationAttribute="data-defines"; // the attribute that we use for annotation
+    var declAttribute="data-decl"; // the attribute that we use for annotation of declarations
+    var drefAttribute="data-dref"; // the attribute that we use for annotation for declaration references
 
     // given an element, find the element it defines
     // has to be of the form #id
-    var getDefinedElement = function(elem){
-        var selector = $(elem).attr(annotationAttribute).substring(1);
-        return $(document.getElementById(selector));
+    var getDeclElement = function(elem){
+        var value = $(elem).attr(drefAttribute);
+	var declElement="*["+declAttribute+"='"+ value + "']";
+//	console.log("DeclElement=" + declElement);
+        return $(declElement);
     }
 
     // find all elements that have the attribute
     // and add hover(enterHandler, leaveHandler) handlers
-    $("*["+annotationAttribute+"]").hover(function(){
-        getDefinedElement(this).attr("mathbackground", "red");
-        $(this).css("background-color", "orange");
-    }, function(){
-        getDefinedElement(this).removeAttr("mathbackground");
-        $(this).css("background-color", "");
-
-    });
+    $("*["+drefAttribute+"]").hover(
+	function(){getDeclElement(this).css("background-color", "orange");},
+	function(){getDeclElement(this).css("background-color", "");}
+    );
 })