JSF hinzufügen hover auf ein panel

Du falsch Selektor: Sie definiert keine Klasse auf Ihre Tafel, sondern definierte id, die würde geändert werden, durch die naming-container. Unter Berücksichtigung Ihrer Kommentar die einfachste Lösung wird sein, zu definieren, eine zusätzliche Klasse für ein panel benötigt.

Ansicht:

<h:form id="form">
    <p:dataTable id="table">
        <p:panel id="hoverPanel" styleClass="base-class #{bean.condition ? 'change-panel' : ''}">
            <p:commandLink id="button" styleClass="btn" value="Show" rendered="condition">
            </p:commandLink>
        </p:panel>
    </p:dataTable>
</h:form>

Und tun Ihren job in JavaScript:

$('.change-panel').hover(
    function () {
       $(this).find('.btn').toggleClass('visible');
    }
    //or do your job by binding two function handlers to distinguish between mouse events
);

Ausführliche Antwort

Wie pro Ihre Kommentare und gegeben selbst beantworten, das ist natürlich nicht der beste Weg, um die Arbeit zu tun, werde ich eine vollständige Antwort. Wenn Sie sich entscheiden, Fragen, nächste Frage, und eine Antwort bekommen, versuchen Sie Ihr bestes, um vollständig zu untersuchen das code, den Sie vorgelegt worden sind. Auch wäre es klug, einige JavaScript/jQuery auf dem Weg.

Die Ansicht zeigt zwei datatable-Spalte mit der zweiten Spalte zeigt das panel mit einem link, den Sie wollen. Die Tabelle enthält alle möglichen alternativen, so sicher sein, wählen Sie die beste Konfiguration für Sie.

Ansicht:

<h:head>
    <h:outputScript name="js/js.js" target="body"/>
    <style>
        .invisible {
            display: none
        }
    </style>
</h:head>
<h:body>
    <h:form id="form">
        <p:dataTable value="#{bean.data}" var="data" id="table" rowIndexVar="index">
            <p:column headerText="Data">
                <h:outputText value="#{data}"/>
            </p:column>
            <p:column headerText="Other functions">
                <p:panel id="hoverPanel" styleClass="#{((index eq 0) || (index eq 1) || (index eq 2)) ? 'change-panel' : ''}">
                    <h:outputText value="Row #{index + 1}"/>
                    <p:commandLink id="button" value="Show"
                                   rendered="#{!((index eq 1) || (index eq 3))}"
                                   styleClass="btn #{(index eq 0) ? 'invisible' : ''}"/>
                </p:panel>
            </p:column>
        </p:dataTable>
    </h:form>
</h:body>

JavaScript:

$(document).ready(function() {
    $('.change-panel').hover(
        function () {
           $(this).find('.btn').toggleClass('invisible');
        }
    );
});

Bean:

@ManagedBean
@RequestScoped
public class Bean implements Serializable {

    private List<String> data = new ArrayList<String>();

    public Q15435267Bean() {
        data.add("Data element 1");
        data.add("Data element 2");
        data.add("Data element 3");
        data.add("Data element 4");
        data.add("Data element 5");
    }

    public List<String> getData() {
        return data;
    }

    public void setData(List<String> data) {
        this.data = data;
    }

}