evidenzia un elemento DOM al passaggio del mouse, come ispeziona fa

Question

Abbiamo un bookmarklet, e l'utente fa clic su un pulsante e un'ispezione come la più alta ha bisogno di entrare. Vogliamo che questo sia cross browser.

Per questo è necessario rilevare l'elemento DOM durante il movimento del mouse e una volta ottenuto questo elemento, è necessario evidenziare con CSS.

Abbiamo problemi nel rilevare l'elemento DOM con il movimento del mouse, puoi guidarci come è fatto?

Una volta ottenuto questo elemento DOM, al clic dell'utente è necessario estrarre XPath.

Answer 1

È possibile collegare mousemove su document o document.body, quindi utilizzare la proprietà target dell'oggetto evento per scoprire l'elemento più in alto il mouse si trova sopra. Quindi applicare il CSS è probabilmente fatto più facilmente aggiungendo una classe.

Ma mi chiedo se il :hover pseudo-classe che si potrebbe risparmiare un po 'fastidio ...

Se non si utilizza :hover, ecco un esempio:

(function() { 
    var prev; 

    if (document.body.addEventListener) { 
    document.body.addEventListener('mouseover', handler, false); 
    } 
    else if (document.body.attachEvent) { 
    document.body.attachEvent('mouseover', function(e) { 
     return handler(e || window.event); 
    }); 
    } 
    else { 
    document.body.onmouseover = handler; 
    } 

    function handler(event) { 
    if (event.target === document.body || 
     (prev && prev === event.target)) { 
     return; 
    } 
    if (prev) { 
     prev.className = prev.className.replace(/\bhighlight\b/, ''); 
     prev = undefined; 
    } 
    if (event.target) { 
     prev = event.target; 
     prev.className += " highlight"; 
    } 
    } 

})(); 

Live copy | source

Answer 2

Con l'aiuto di jQuery si può fare qualcosa di simile

$('*').hover(
    function(e){ 
     $(this).css('border', '1px solid black'); 
     e.preventDefault(); 
     e.stopPropagation(); 
     return false; 
    },function(e){ 
     $(this).css('border', 'none'); 
     e.preventDefault(); 
     e.stopPropagation(); 
     return false; 
    } 
); 

Con questo codice nel tuo bookmarklet, è possibile caricare ciò che mai codice

javascript:function loadScript(src){f=document.createElement('script');if(f){f.setAttribute("type","text/javascript");f.setAttribute("src",src);document.getElementsByTagName("head")[0].appendChild(f);}};loadScript("yourscripturl");