In building a visualforce page, I am trying to utilize the standard salesforce help icon (or help orb). However, I noticed when I first hover/visit the icon, the help text appears, but the icon remains grayed out. If I go back and revisit/hover over the icon, the icon is highlighted with the standard orange color.

Am I missing a simple step or piece of code that is causing this issue? I would like it to highlight on the first visit/hover, but do not see/know where that is controlled.

Below is my visualforce code and the supporting CSS. Any help is much appreciated. Thanks!

                      <span class="vfHelpText">

                             <apex:outputLink value="">

                                 <img src="/s.gif" alt="" class="helpOrb" />

                                       <span>This is help text.</span>

                             </apex:outputLink>

                         </span>

.vfHelpText a            {position:relative;

                                  white-space: normal;}

.vfHelpText a span       {display: none;}

.vfHelpText a:hover span {display: block;

                                  position:absolute;

                                  top:1.25em;

                                  padding:2px 5px;

                                  left:0em; width:15em;

                                  z-index:100;

                                  border:1px solid orange;

                                  background-color:#FEFDB9;

                                  color:black;}

In building a visualforce page, I am trying to utilize the standard salesforce help icon (or help orb). However, I noticed when I first hover/visit the icon, the help text appears, but the icon remains grayed out. If I go back and revisit/hover over the icon, the icon is highlighted with the standard orange color.

Am I missing a simple step or piece of code that is causing this issue? I would like it to highlight on the first visit/hover, but do not see/know where that is controlled.

Below is my visualforce code and the supporting CSS. Any help is much appreciated. Thanks!

                      <span class="vfHelpText">

                             <apex:outputLink value="">

                                 <img src="/s.gif" alt="" class="helpOrb" />

                                       <span>This is help text.</span>

                             </apex:outputLink>

                         </span>

.vfHelpText a            {position:relative;

                                  white-space: normal;}

.vfHelpText a span       {display: none;}

.vfHelpText a:hover span {display: block;

                                  position:absolute;

                                  top:1.25em;

                                  padding:2px 5px;

                                  left:0em; width:15em;

                                  z-index:100;

                                  border:1px solid orange;

                                  background-color:#FEFDB9;

                                  color:black;}