[SalesForce] onmouseout Event after clicking on link

Actual Page

Here after clicking on the link onmouseout event should be called.I'm very poor in Javascript & need help in this

Required something like this
enter image description here

when I enter into the block of reporting,& click on subscribe then mouseout event occurs.The same functionality I want here
My code 

<style>
    .helpLink {
      position:relative;
    }

    .videoPanel {
      display:none;
      width:160px;
      height:120px;
      background:#EEE;
      border:1px solid #CCC;

      position:absolute;
      left:-160px;
      z-index:10;
    }
  </style>

       <apex:outputLink styleClass="helpLink" onmouseover="$('{!$Component.Foo}').style.display = 'block';" title="help" onmouseout="$('{!$Component.Foo}').style.display = 'none';" >
                <apex:image value="/s.gif" styleClass="helpIcon" />
            </apex:outputLink>
            <apex:outputPanel id="Foo" styleClass="video" title="help" >
               <a  href="google.com" target="_blank" onmouseout="$('{!$Component.Foo}').style.display = 'none';">link</a>
               <a href="youtube.com" target="_blank" onmouseout="$('{!$Component.Foo}').style.display = 'none';">Video</a>
            </apex:outputPanel>

Best Answer

There are 2 reasons that your current onMouseOut and onMouseOver code is not working:

  1. Your jQuery id selector needs to be preceded with the '#' sign --- the Visualforce $Component.<componentName> syntax only gives you the Component's Id, but does not prefix it with a `#' sign, which is the selector for getting a DOM element by its Id.
  2. The best way to show/hide an element with jQuery is to use the $(selector).show(), .hide(), or .toggle() methods. If you explicitly want to set the display property, then use $(selector).css('display','block')
  3. For complex Visualforce element trees, as mast0r suggested, the best way to get at an element is to use the "attribute ends with" selector, as Visualforce automatically generates unique DOM Ids that generally are not equal to the "id" attribute that you assign in your Visualforce Page definition. For instance, if you had <apex:outputLink id="Foo" value="http://apple.com">, the generated DOM might be something like <a href="http://apple.com" id="j_id0:Foo"/>. So the best practice for accessing DOM elements by Id with jQuery in Visualforce is to do this: jQuery('[id$=<visualforceId>]').hide(), or in your case, jQuery('[id$=Foo]').hide();

So, with these in mind, here is how you can adjust your 2 handlers:

<apex:outputLink styleClass="helpLink" title="help"
    onmouseover="jQuery('[id$=Foo]').css('display','block');"
    onmouseover="jQuery('[id$=Foo]').css('display','none');">
Related Topic