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

    .helpLink {

    .videoPanel {
      border:1px solid #CCC;


       <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: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>
  • Need not go for javascript .Onmouseout events are supported on many VF tags .Just you may need action function – Mohith Shrivastava Feb 6 '13 at 12:57
  • What exactly are you experiencing? What is the expected behavior? Can you please include the code you have already written in your question for us to take a look at it? We need some more information here. – Jesse Altman Feb 6 '13 at 13:13
  • My requirement is like this say suppose when u mouseover on tags here on 'javascript' u'll be getting '7 followers, Rss,subscribe & so on'.Now here I can click on the link rss & when i mouseout this will disappear.The same functionality requries for me.Modified my question – Eagerin Sf Feb 6 '13 at 13:31

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"
| improve this answer | |
  • the $ is the browser's native document.querySelector function, not jQuery – bigassforce Feb 7 '13 at 14:56
  • further, I would respectfully suggest that we encourage OP to use the sanctioned {!$Component} notation and learn about component hierarchy, instead of doing a partial string match using a third-party library... salesforce.com/us/developer/docs/pages/Content/… – bigassforce Feb 7 '13 at 14:58
  • @user31, with respect, the "sanctioned" method is (1) a true pain to get correct in complex pages, even if you are an experienced developer who understands the component hierarchy (2) not always applicable, as sometimes you are looking to alter a rendered DOM element that Visualforce does not identify according to the hierarchy. As to the point about $ being the native document.querySelector, IE 6 and 7 do not support it, and as Salesforce supports IE 6 & 7, SFDC devs might consider it), so it is much safer to use jQuery, plus jQuery provides additional helpful selectors (:has,:contains) – zachelrath Feb 7 '13 at 16:31
  • pardon @zachelrath, fair call - didn't mean to contest the merits of selector libraries; just noting for consistency that OP's question is a copypasta from a previous answer, and the $ identifier does not refer to the jQuery object per your answer; the lib is absent entirely on his page – bigassforce Feb 7 '13 at 16:48
  • 1
    @EagerinSf I'm not exactly sure in which order you're trying to show/hide various elements, so I'd experiment with mast0r's jsFiddle to try to achieve what you're looking for. – zachelrath Feb 8 '13 at 15:49


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

<apex:outputLink styleClass="helpLink" 

function doOnclick() {
    // Do your onclick actions here
    // After that calling mouse-out function

function doMouseOut() {
    // Do your stuff for mouse out action

I think you need just some css and jquery code.

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

enter image description here

| improve this answer | |
  • Here Param1 is of Hyperlink type & I need to click on it – Eagerin Sf Feb 6 '13 at 14:26
  • Ok, then replace in code Param 1 to <a href="google.com">Param 1</a> – Sergej Utko Feb 6 '13 at 14:29
  • here my problem is I can't able to click on Param 1 because their is a mouseout action on it <apex:outputLink styleClass="helpLink" onmouseover="$('{!$Component.Foo}').style.display = 'block';" onmouseout="$('{!$Component.Foo}').style.display = 'none';" > after clicking on hyperlink mouseout event should occur.How can I do it – Eagerin Sf Feb 6 '13 at 14:32
  • @EagerinSf I think i got it now. Updated my example. – Sergej Utko Feb 6 '13 at 14:46
  • @eyescream i.imgur.com/TJdhVS2.gif – bigassforce Feb 7 '13 at 15:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.