Jquery: highlight on mouse over doesn't work on certain pages

Testing this jquery code on external sites (loaded via proxy to bypass Single Orig开发者_开发问答in Policy), it appears that there are certain sites where upon mouseover the expected red boarder line do not appear. How can I make sure that the red border line appears upon mouse over always on top of every thing else ? It could be that the certain site in which the highlighting upon mouseover does not appear, z-index or some other weirdness could be causing this problem, yet there are no javascript error presented....

$(document)
    .mouseover(function(event) {  
        if ($(event.target).parents('#myunique').length){ 
            event.preventDefault();
        }else{ 
        $(event.target).addClass('myoutlineElement');
        }
    })
    .mouseout(function(event) {
        if ($(event.target).parents('#myunique').length){  
            event.preventDefault();
        }else{      
        $(event.target).removeClass('myoutlineElement');  
        }
    })   

---

The mouseover/out does not work ? or the border does not get applied.

Try debugging console.log(event.target); with firebug, to check if the event gets fired or not.

Also keep in mind, that if elements have defined border styling through the style attribute (style="border:...;") then the class will not override it, as the style attribute is more specific.

Unless you use the !important directive, as @aendrew mentions in his answer.

---

Where you define .myoutlineElement's CSS, you could try adding a z-index declaration like:

... z-index: 99 !important;