css - 将一个 commandButton onmouseover 事件显示到另一个 commandButton primefaces

Question

当鼠标指针悬停在另一个命令按钮上时，我需要显示一个 primefaces 命令按钮，但只有在非常必要时我才能使用 div。如果可能的话，使用 onmuseover 事件会更好，例如:

<p:commandButton id="button1" value="Display" onmouseover="displayButton2" update="button2"/>
<p:commandButton id="button2" value="Valid Option" rendered="false"/>

Answer 1

如果您不想使用 div，您可以使用 span:

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

还有你的CSS:

#buttonSpan{
  display:none;
  ...
}

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

在 css 中\是转义文字。所以实际上您是在组件上设置一个“悬停”CSS 设置，其 ID 为 form:button1。因此，如果您没有表单，那么它的#button1:hover...如果您的表单称为 formTest，那么它的#formTest\:button1。您需要检查为该组件生成的 ID。