Question

This question is a bit open ended as I’m not sure it’s possible or where to start with it.

If you are familiar with the Web Developer Toolbar for Firefox you will know the CSS > View Style Information tool where you can mouse around a web page and it will select the <h1>, <div> or whatever html tag you are hovering over.

I’d like to recreate this in with jQuery if possible. Hovering over a part of a web page will return the current HTML tag as $(this).

Where do I start? Is this possible?

I want to do this in order to assign custom CSS to it, in order to display it later. e.g

<p class="somename">kjsadhsfdj  jhfdhj</p>

---

thanks for the great answers below, not sure which to mark as correct as they are all good!

started with this:

$(document).ready(
    function() {
        $("*").hover(
            function(obj)
            {
                $(this).css("border","1px solid red");
                $(this).click(
                    function()
                    {
                        console.log($(this));
                    }
                );
            },
            function(obj)
            {
                $(this).css("border","0");
            }
        )
    }
);

but it’s also selecting all of the parent tags…

Answer 1

Start with .hover(). It has examples and everything.

Update:

Actually, this is better.

$("*")
    .mouseover(function(e) {
        $(e.target).addClass('somename');
    })
    .mouseout(function(e) {
        $(e.target).removeClass('somename');
});​

Obviously inside a document ready function.