Karl Steltenpohl

While working on a project I was googling how firebug achieves its element selection effect. I found some examples but ended up creating my own. I experimented for a long time with different methods before writing my own, and this works the best and is the simplest that I've seen.

The css for the selection highlight class:

.hoverhighlight{
    /*outline:1px solid #2381d0;*/ /* You can use either an outline or a box-shadow */
    box-shadow:0 0 3px 3px #2381d0;
    -moz-shadow:0 0 3px 3px #2381d0;
    -webkit-box-shadow:0 0 3px 3px #2381d0;
}

This is a very simplified version of the code, but it works suprisingly well. It requires jquery. If the element you are hovering over has a parent with no overflow the outline/highlight may be obscured. There are ways around this issue, but not Im not covering it in this post.

$("body").on("mouseover", function(event){
    $(".hoverhighlight").removeClass("hoverhighlight");
    $(event.target).addClass("hoverhighlight");
});

Wow much simpler than you'd think! (IE won't work with box shadow.)