Jquery: le surlignage sur la souris ne fonctionne pas sur certaines pages

Question

Test de ce code jquery sur des sites externes (chargé via proxy pour contourner la politique d'origine unique), il semble qu'il existe certains sites où, au passage de la souris, la ligne rouge attendue n'apparaît pas. Comment puis-je m'assurer que la ligne de bordure rouge apparaît toujours au-dessus de tout le reste de la souris? Il se pourrait que le site particulier dans lequel la mise en évidence sur mouseover ne semble pas, z-index ou une autre bizarrerie pourraient être à l'origine de ce problème, mais il n'y a pas d'erreur javascript présenté ....

$(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'); 
     } 
    }) 

Answer 1

Le mouseover/out ne fonctionne pas? ou la frontière ne s'applique pas. Essayez le débogage console.log(event.target); avec firebug, pour vérifier si l'événement est déclenché ou non. Notez également que si des éléments ont un style de bordure défini via l'attribut style (style="border:...;"), la classe ne le remplacera pas, car l'attribut style est plus spécifique.

Sauf si vous utilisez la directive !important, comme @aendrew mentionne dans sa réponse.

Answer 2

Si vous définissez le CSS .myoutlineElement, vous pouvez essayer d'ajouter une déclaration z-index comme:

... z-index: 99 !important;