MouseOver not as expected

[iagman]

A website problem involves four social icons at bottom of nav bar.
Each icon is normally green as they display side by side across the nav bar (see diagram 1).

When an icon detects a mouseover (see diagram 2), the mouse cursor turns into a hand in
the customary manner. The selected icon remains green while the other three are grayed-out.
The mouseover graphic that appears contains the three grayed-out icons.

There is a small space between icons that is not sensitive to the mouse cursor so I know
mouseover areas do not overlap (see diagram 3).

The problem is, if the mouse is moved from one icon to a neighboring icon during a mouseover
event (see diagram 4), the new icon does not sense the mouseover; all three that were grayed-out
remain and the green icon stays green.

Only by moving the curser away from all icons, as in diagram 1, and allowing them return to green will a new
mouseover be recognized.
It appears that during a mouseover when the three grayed-out icons appear, this graphic then prevents
the underlying green icons from recognizing any new mouseovers. What I do not understand is why in
diagram 3, the mouseover event does not terminate and all four icons return to green.
Any advice on how to keep this grayed-out effect but get it working as desired would be appreciated.

[gwpriester]

I think it would be easier and more effective if you made your mouse off buttons gray with a subtle gray icon and then have the mouse over button display a bright green icon. This will accomplish the same thing without the problem you are encountering.

[iagman]

Thanks, that's my thought too, but this isn't my website.
They want the icons to act as I described so that's the
solution I'm hoping to find.

[trukkerz]

is this the effect that your after - i just did the buttons seperate not as a nav bar

nav example.web

[jamesd]

My preference would be this way or opposite as Gary suggested

[iagman]

trukkerz, thanks for your input.
The effect you show is the normal way but not the way my daughter wants these
button to act. She wants the four buttons to display initially as green. When one
button detects a mouseover, that one button remains green while the other three
go gray. It is kind of backward from what you would expect but is a rather nice effect.
The gray-out is caused by a graphic on the mouseover layer which covers whatever
three green buttons that have not received the mouseover. I think it is this graphic
that is causing the problem, but I haven't found solution yet.

[trukkerz]

ahh I see now - prob the only way is to use layers but as you say the buttons dont change when moving from one mouseover to another - maybe a job for sledger :-)

cheerz

[trukkerz]

nearest i can get is this - I know the graphics need centering !!

nav example 2.web

[iagman]

Hey, that's the effect.
The only difference I see between her's and your's is this;
she has three gray icons in the mouseover layer per button. She does
not repeat the green icon in that layer since it was already green.
I see that you have added a green icon to the mouseover layer
in addition to the three gray icons and that works great. I can't
understand why her's does not work too, but will probably just
add green icons like you did.
Thanks for the help.
iagman

[trukkerz]

no probs - still needs a little work but its close to what you are after

cheerz