trying to rewrite a func using 'this'

[toptomato]

I'd like to re-write the following code using 'this', instead of the way it is now which refs the class. Currently the way it's written it accesses several divs at once, even though the user doesn't see them, which i'm sure is not good coding.

I'm trying to do this non-obtrusively, i.e, not put an event handler in the HTML. so not sure if it's even possible to do, ie, write a function using 'this' non-obtrusively.
(using jQuery btw)

to be clear, mousing over one div displays another div. and mousing out, then hides it. have had trouble using jQuery's toggle function in the past so i'm not using here.

$(function() {
    $('.info-bar').mouseover(function(){
            $('.theinfo').css('visibility', 'visible');
    });
    $('.info-bar').mouseout(function(){
            $('.theinfo').css('visibility', 'hidden');
            
    });
}) 

sorry, can't show an example at the moment. big thanks for any help on this

[xelawho]

it may be more complicated than it seems, as "this" always refers to the element/object/whatever that invokes it, so in this case it will refer to the div with the '.info-bar' class, and the divs with the '.theinfo' class cannot intrinsically be accessed from there.

but if your html has a reliably consistent structure, you can use "this" to access another element by seeing how the two are related in the DOM. Firebug's DOM inspector is good for this - it's hard to say without seeing your html, but the relevant div might be accessible as this.childNodes[0] or this.firstElementChild or this.nextSibling or this.lastChild, etc (or whatever their equivalents in jQuery are).

have a look, and if you can't find it, post a sample of your html showing how the two divs relate to each other structure-wise.

[toptomato]

Yes I know what you mean about referring to a different div when using 'this'.

The divs in question are siblings. here's the HTML and a link

<div><!-- #4 -->
            <div class="AccordionTitle"  id="acchdr4">
            <img src="img/sh/acc_hdr_4_sh_off.gif" name="four" border="0"  id="acHdr4" alt="Accordion Header 4 - Hear Now Productions" class="rolloverme"/>
            </div>
        </div>
        <div id="Accordion4Content" class="AccordionContent Acc4">
            <img src="img/spacer_trans.gif" height="270" width="471" border="0" alt="Harley Associates Mediation" />
            <div id="info_tc" class="theinfo">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id.
            </div>
            <div class="info-bar" id="infobar_tc">
            </div>
        </div><!-- 4 --> 

The div with class 'info-bar' bar, when moused over triggers the function that shows the div w/ class 'theinfo'.
here's a link to the page
http://www.tomcarden.net/dev/faux.html

the info-bar is purple and is located at the bottom of each entry.
here the js too. thanks for the great help

$(function() {
    $('.info-bar').mouseover(function(){
            $('.theinfo').css('visibility', 'visible');
    });
    $('.info-bar').mouseout(function(){
            $('.theinfo').css('visibility', 'hidden');
            });
}) 

[xelawho]

yup, siblings. this works on the html you gave - like I say, as long as the divs are always related the same way you should be ok...

$(function() {
    $('.info-bar').mouseover(function(){
            $(this.previousElementSibling).css('visibility', 'visible');
    });
    $('.info-bar').mouseout(function(){
            $(this.previousElementSibling).css('visibility', 'hidden');
            });
})

[xelawho]

or (it appears) as jQuery would have it...

$(function() {
    $('.info-bar').mouseover(function(){
            $(this).prev().css('visibility', 'visible');
    });
    $('.info-bar').mouseout(function(){
            $(this).prev().css('visibility', 'hidden');
            });
})

[toptomato]

that is fantastic. thank you so much Xelawho. much appreciated

[xelawho]

happy to help. It appears I am learning jQuery by osmosis