Pick elements.

by Alexander Shutov

HTML

<div id="text">Text</div>
<div> <a href="google.com">Google</a>

</div>
<div><span>Text</span><span>Text</span>

</div>

CSS

.pointed {
    background:green !important;
    box-sizing:border-box;
    box-shadow:0 0 16px green, 0 0 8px green;
}
.selected {
    background:red !important;
}

JavaScript

var current;
window.addEventListener('mousemove', function (e) {
    var pointed = document.elementFromPoint(e.x, e.y);
    if (pointed !== current) {
        if (current) {
            current.classList.remove('pointed');
        }
        pointed.classList.add('pointed');
        current = pointed;
    }
});

window.addEventListener('click', function (e) {
    e.stopPropagation();
    e.cancelBubble = true;
    e.preventDefault();

    var pointed = document.elementFromPoint(e.x, e.y);
    if (pointed.classList.contains('selected')) {
        pointed.classList.remove('selected');
    } else {
        pointed.classList.add('selected');
    }

    if (pointed.id) {
        alert('#' + pointed.id);
    }
    if (pointed.classList.length > 0) {
        alert('.' + Array.prototype.join.call(pointed.classList, '.'));
    }
}, true);

document.querySelector('div').onclick = function () {
    alert('hello');
};