0

I need display a primefaces commandButton when mouse pointer is over another commandButton, but I can use div only if is extremely necesary. If is posible do this whith the onmuseover event much better, like:

<p:commandButton id="button1" value="Display" onmouseover="displayButton2" update="button2"/>
<p:commandButton id="button2" value="Valid Option" rendered="false"/>
leoJerez
  • 55
  • 1
  • 9
  • Whats the intention or the aim behind this? I can't figure out why someone would do this. Can you give a little bit more background information please. – LarsBauer Jul 04 '14 at 12:47
  • @leoJerez When you said "I can use div only if is extremely necesary", do you mean you HAVE to use `div`, or can you use other components such as `p:overlayPanel`? – rion18 Jul 04 '14 at 17:18
  • @QueryLars I want to do an effect like .class:hover with css, but I tried with a css class and doesn't fire. Then, I need show the p:commandButton 2 just when mouse pointer is over the p:commandButton 1. Like a sub menu, but without the click event. I was really clear? – leoJerez Jul 04 '14 at 19:02
  • @rion 18. I want to say that I can't use DIV, because the boss don´t want that we use that component, but I can use any other. – leoJerez Jul 04 '14 at 19:02

1 Answers1

0

If you don't want to use a div you can use a span:

<p:commandButton id="button1" value="Display" />
<span id="buttonSpan">
  <p:commandButton id="button2" value="Valid Option"/>
</span>

And your css:

#buttonSpan{
  display:none;
  ...
}

#form\:button1:hover #buttonSpan{
     display:block;   
}

In css \ is the escape literal. So actually you're setting a "hover" CSS setting on the component with the id form:button1. So if you don't have a form, then its #button1:hover... If your form is called formTest then its #formTest\:button1. You need to check your generated id for that component.

rion18
  • 1,211
  • 16
  • 22
  • Thanks for your answer, but it doesn't work. I don't understand what do you mean with the expression #form\:button1 because I am not an expert in css – leoJerez Jul 04 '14 at 21:25
  • form:button1 is the id generated by jsf. You have to replace it by the **generated** id for your button with id button1. In my example, I have an h:form with id "form" containing my button1. – rion18 Jul 04 '14 at 21:34
  • I did replace with this #myFormId:myButtonId:hover #buttonSpan but it doesn't work. If both commandButton are in the same form is not a problem? – leoJerez Jul 04 '14 at 22:31
  • It's no problem. In order to edit my answer, when you hover on the first button, the span has to be created containing the second button. What is the criteria to REHIDE the span? Or is it possible that once it's been rendered it should stay rendered? – rion18 Jul 05 '14 at 19:13