CODEWITHSUNDEEP
jquery
KJW
KJW

Reputation: 15251

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

Testing this jquery code on external sites (loaded via proxy to bypass Single Origin 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');  
        }
    })

Upvotes: 0

Views: 395

Answers (2)

aendra
aendra

Reputation: 5346

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

... z-index: 99 !important;

Upvotes: 1

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196256

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.

Upvotes: 1

Related Questions