Add mouseover effect to navbar search cell

[Marris]

I am trying to add a mouseover effect (background color change) to each <td> cell in the navbar.

What I have done is define a new css class vbmenu_control_mover which is identical to vbmenu_control except for a different background color. Then I change the <td> class if onmouseover is detected on the cell.

This method works fine for all cells in the navbar with standard links, but the <td> onmouseover background change fails on the Search and Quick Links cells. Presumably this is because they have their own mouseover handling.

Is there any way to have mouseover on the Search and Quicklinks effect the entire containing <td> cell, rather than just the 'Search' text itself?

The only progress I have made was to move the id="navbar_search" from the <td> tag to the <a> tag. This allows the <td> background change over the cell, but only until the mouse reaches the link text...then the button reverts to the original background.

<td class="vbmenu_control" onmouseover="this.className='vbmenu_control_mover'" onmouseout="this.className='vbmenu_control'"><a id="navbar_search" href="$vboptions[bburl]/search.php?$session[sessionurl]" accesskey="4">$vbphrase[search]</a> <script type="text/javascript"> vbmenu_register("navbar_search",1); </script></td> 

The attached image shows the mouseover effect on the cell (darker background), then the lower image shows the problem when the cursor is over the link text. The <td> background formatting is lost and the backgound color only changes under the text.

[Jake Bunce]

The only progress I have made was to move the id="navbar_search" from the <td> tag to the <a> tag. This allows the <td> background change over the cell, but only until the mouse reaches the link text...then the button reverts to the original background.

Maybe add the mouseover code to both the "td" and the "a" so it affects both the table cell and the text? I am just guessing.

[Marris]

Maybe add the mouseover code to both the "td" and the "a" so it affects both the table cell and the text? I am just guessing.

Thanks for the suggestion. Unfortunately, it didn't fix the problem. The vBulletin popup java code seems to be overriding the <td> level mouseover code, so that when the <a> link text is highlighted, <td> level mouseover effects are negated.

The <a> link text will display the normal hover behavior, but the enclosing <td> cell reverts to the mouse off state (even though the mouse is over it).

As I said, this doesn't happen on the non-popup navbar links.

Any other suggestions? Is there some way to get the vBulletin java popup mouseover state code to register across the whole <td> cell?

[Jake Bunce]

Any other suggestions? Is there some way to get the vBulletin java popup mouseover state code to register across the whole <td> cell?

The popup code identifies the page element by the "id" tag. I don't know if that helps you.

I am at a loss for your specific problem.

[Marris]

Well, I couldn't get around the popup code overriding the table mouseover condition. I had to redo the menu with a css based rollover solution using a horizontal list and setting the list item tag <li id="navbar_search">.