ansaurus

Question

Answer 1

+3 A:

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.

Blair McMillan 2010-02-23 14:59:31

Answer 2

A:

You can do something like

 $(a, h1, h2, h3, div).mouseover(function(){
    //$(this) get the element details and get all elements of this type and add a class to all of them to highlite.
 })

Teja Kantamneni 2010-02-23 15:01:12

Answer 3

A:

You could start with something like this

jQuery('h1, h2').hover(function(){console.log(this); this.addClass('redBorder')},function(){this.removeClass('redBorder');})

You could select more tags or * for everything

Dave.Sol 2010-02-23 15:06:13

Answer 4

+1 A:

Yeah it's possible, have a look at FireBugLite, it's basically a simple version of FireBug implemented 100% in javascript.

As to where you would start, I whipped up something simple here that logs the current element when you move the mouse over it, it should help you out! :)

$(document).ready(function(){
    bind($('html'));
});

function bind(jq){
    jq.mouseenter(function(){
        console.log($(this));
    });
    var kids = jq.children();
    if(kids.length > 0){
       kids.each(function(){
            bind($(this));            
        });
    }
}

Alex 2010-02-23 15:06:50

Sorry, forgot to explain: what this does it recursively binds "console.log()" to the "mouseEnter()" event of each child, starting from HTML. If the element has children, the function goes on to apply it to all children too.

Alex 2010-02-23 15:08:02

Answer 5

+1 A:

This ought to get you started:

$(document).ready(
    function() {
        $("*").hover(
            function(obj)
            {
                $(this).addClass("hovering");
                return false; //Prevent parent elements from changing too
            },
            function(obj)
            {
                $(this).removeClass("hovering");
                return false; //Prevent parent elements from changing too
            }
        )
    }
);

The first function adds whatever CSS class you want to elements you're hovering over, and the second removes that class. For example, 'hovering' could be this to add a border around it:

.hovering
{
    border: solid 1px red;
}

div.hovering
{
    border: solid 1px blue;
}

h1.hovering
{
    border: solid 1px green;
}

You could change the behavior for different element types by using

$("div").hover(...
$("h1").hover(...

Also, as alexn stated, you can use $("* not(html, body, etc)") to prevent certain element types from getting the hover functions added to them.

Aaron 2010-02-23 15:06:53

That's what I started with too, you need to use the `target` (see my answer), otherwise the element and all of it's parents get the style.

Blair McMillan 2010-02-23 15:19:09

Alternatively, you can `return false;` as I have added to my answer to prevent the event from going to the parents.

Aaron 2010-02-23 15:21:55

Good solution. I went off hunting for another way for it to work when hover didn't work for me correctly in the first place. I guess it's up to the OP what they prefer.

Blair McMillan 2010-02-23 15:25:54

Answer 6

+1 A:

Here is a proof-of-concept, nothing fancy. The key is to use the hover function along with add/removeClas.

<html>

    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;
        <script type="text/javascript">
            $(document).ready(function()
            {
                $("*:not('html, body')").hover(function() { $(this).addClass("hover"); }, function() { $(this).removeClass("hover"); });
            });
        </script>
        <style type="text/css">
            .hover { border: 1px solid #ff00ff; }
            strong.hover { border-color: red; }

        </style>
    </head>

    <body>
        <p>Hello, <strong>StackOverflow</strong>!</p>
        <div style="width: 300px; float: left;">
            <span>This is a left-floating div</span>
        </div>
        <div style="width: 300px; float: right;">
            <span>This is a right-floating div</span>
        </div>
    </body>

</html>

Edit:

Changed selector to *:not('html, body') since you probably don't want to highlight html or body elements.

If you want to highlight elements different, defince your css classes like this:

strong.hover { border-color: green; }
span.hover { border-color: red; }

alexn 2010-02-23 15:13:00

ansaurus

tags:

views:

answers:

HTML tag selector in jQuery

Update:

related questions