如何使jQuery将其他元素包含在悬停中

Question

i have a little problem concerning hover and jQuery:

I have created a table out of a mySQL-Database. There are some specific rows, that geht the Attribute display:none in order to not show them. But if you lay down the mous on the element obove the invisible one, the invisible element should become visible (maybe, there are more than one invisible elements, than all the invisible elements up to the next visible element should became visible. If you get the mouse off these elements, the invisible ones should disappear again. I have made a function, which does exactly what I want, exept one little thing. I would like to refer the hover not only to the visible row, but also to the invisible, which means, if you get the mouse off the visible element, to the former invisible elements, they aren't supposed to disappear, but they do! I have tried to organize the tr's with spans, but it seems at HTML don't like spans in tables, unless they aren't in td's. After that I have tried to solve the problem with the tr an mouse position, and bind the mousemove to all elements. This doesn't work either (In the following example I tried at first the xy-position of the visible Element itself, if i get this work, i will expand it to the former invisible elements.

$("#NH00").hover(
    function(){
        $('tr[name="hiddenNH00"]').show();},
    function(){
        $("*").one("mousemove", function(e) {
            var offset = $(this).offset();
            var xlt = offset.left;
            var ylt = offset.top;
            var xrb = offset.left + $(this).outerWidth(false);
            var yrb = offset.top + $(this).outerHeight(false);
            if(e.pageX < xlt || e.pageX > xrb || e.pageY < ylt || e.pageY > yrb){
                $('tr[name="hiddenNH00"]').hide();
            }
        })
    }
);

Answer 1

Take a look at the jExpand plugin .
The only possible issue I see is that it seems to expect for there to be one visible row, and one hidden row rather than multiples, as you describe.

If that is a problem, maybe you can re-work your markup so that the visible row is the same as now, but the hidden ones are in a nested table in the secondary row.

Make sure you read through the comments. Apparently there was an IE8 issue that someone fixed, and I'm not sure it made it back into the actual documentation.

Answer 2

Why not attach the same event handler to the "invisible" rows?

$("#NH00, tr[name='hiddenNH00']").hover(
    function(){
        $('tr[name="hiddenNH00"]').show();
    },
    function(){
        $('tr[name="hiddenNH00"]').hide();
    }
);

DEMO