onmouseout Event after clicking on link

Question

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

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>

Answer 1

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');">

Answer 2

UPDATE

Ok, then just creating an extra javascript function for the onmouseout action and will call this functiona after onmouseclick:

<apex:outputLink styleClass="helpLink" 
                 onmouseover="jQuery('[id$=Foo]').show()"
                 onclick="doOnclick();">
...
</apex:outputLink>

<script>
function doOnclick() {
    // Do your onclick actions here
    ...
    // After that calling mouse-out function
    doMouseOut();
}

function doMouseOut() {
    // Do your stuff for mouse out action
    jQuery('[id$=Foo]').hide();
}
</script>

---

I think you need just some css and jquery code.

Here is my example: http://jsfiddle.net/afwfT/9/