javascript assistance required

Hi fellas,


would someone care to help me out with the following situation:

I have two functions:
highlightHint() =
When onmouseover a hint box is displayed next to an input form element
and when onmouseout the hint box disappears.

and highlightPanel() =

if you click inside an input element the background color of the
panel changes from white to yellow and the hint box is displayed and
shouldnt disappear onmouseout. and at the same time highlightHint
should work normally for the other input elements.

I tried a number of things but i cant get what i want. The below code
displays the hint box onmouseover and it disappears onmouseout. if i
click inside an input the panel is highlighted. What i want is for
the hint box to appear and stay even onmouseout but for the other
input elements onmouseout and onmouseover should work as normal. can
someone help out with the last bit please.

thanks in advance.

the html section for the code looks like this :

<li class=""><label for="leagueForm:leagueForm:name" class="desc">League.Name <span class="req">*</span></label><input type="text" class="txtboxes text large" value="" name="leagueForm:leagueForm:name" id="leagueForm:leagueForm:name"/><span class="hint" style="display: none;"><span class="desc">League.Name2</span></span></li>

HTML:

kace

here is the javascript code for highlightPanel :

function highlightPanel() {
    addPanelFocus(document.getElementsByTagName("input"));
    addPanelFocus(document.getElementsByTagName("textarea"));
 
}
 
function addPanelFocus(elements) {
 
    for (i=0; i < elements.length; i++) {
    var elem = elements[i];
        if (elements[i].type != "button" && elements[i].type !="submit" &&
            elements[i].type != "reset" && elements[i].type !="checkbox" &&   elements[i].type != "radio") {
            if (!elements[i].getAttribute('readonly') && !
elements[i].getAttribute('disabled')) {
 
                    elements[i].onblur=function()
{this.parentNode.className='';this.parentNode.getElementsByTagName("span")
[1].style.display = "none";};
                    elements[i].onclick=function()
{this.parentNode.className='focused';this.parentNode.getElementsByTagName("span")
[1].style.display = "inline";};
                    elements[i].onfocus=function()
{this.parentNode.className='focused';this.parentNode.getElementsByTagName("span")
[1].style.display = "inline";};
            }
        }
    }
 
}

PHP:

and for highlightHint :

function highlightHint() {
 
    addFocusHint(document.getElementsByTagName("li"));
 
}
 
function addFocusHint(elements) {
    var elem = document.getElementsByClassName("hint");
    var elems = document.getElementsByTagName("input");
    for (i=0; i < elements.length; i++) {
            if (elements[i].getElementsByTagName("span")[2] ) {
                elements[i].onmouseover=function()
{this.getElementsByTagName("span")[1].style.display = "inline"};
                elements[i].onmouseout=function()
{this.getElementsByTagName("span")[1].style.display = "none";}
            }
    }

PHP: