Mouseover Highlighting of Page Elements

Question

I am looking for either an open source solution already available or for someone to point me in the right direction to find this. I am creating a Firefox extension that works for elements from the DOM. In Firefox and Chrome, there are element inspectors that highlight the region and/or element that your mouse is currently hovering over, such as the div it is currently hovered over or a button if it is hovered over that. I'm looking for how to implement that functionality into my own extension. Let me know if there are any solutions to this, thanks!

Answer 1

try something like this:

var lastBoxedEl;

function moused(e) {
    var target = e.target; //experiment, try e.currentTarget, e.originanalTarget
    if (lastBoxedEl) {
        lastBoxedEl.style.outline = 'none'
    }
    lastBoxedEl = target;
    target.style.outline = '5px solid red';
}
document.body.addEventListener('mouseover', moused, false);

Answer 2

I did something in the past for a demo. Here is the source opened for your request:

https://github.com/kashiif/hilight-dom-element-on-hover

Note that this is not complete and may require finishing e.g.:

1. The red box is left behind after the element is clicked.
2. There is a little re-flow of element because a border is being added. You may modify the box class such that box-sizing is set to border-box

If you like you may send me a pull request of the changes.