Rich:jQuery

Front-end
#1

Estou tentando colocar uns recursos na minha dataTable, usando rich:JQuery…quero colocar um evento para quando o mouse estiver sobre determinada linha da tabela essa linha mude de cor, quero que selecione a linha inteira…tentei mas não deu certo. Quero saber qual atributo eu coloco no meu selector
Segue codigo da minha tabel:

[code]
<rich:dataTable rows=“5” id=“lista” value="#{listacontato.listaContatos}" var=“contato”>

.odd-row {
background-color: #ECF3FE;
}
.even-row {
background-color: #FCFFFE;
}
.active-row {
background-color: #FFEBDA;
}

</style>

                    <f:facet name="header">
        <h:outputText value="Contatos Cadastrado"></h:outputText>
    </f:facet>

           <h:column>
                <f:facet name="header"><h:outputText value="id"/></f:facet>
                <h:outputText value="#{contato.id}"/>
            </h:column>

            <h:column>
                <f:facet name="header"><h:outputText value="Nome Guerra"/></f:facet>
                <h:outputText value="#{contato.nomeguerra}"/>
            </h:column>

            <h:column>
                <f:facet name="header"><h:outputText value="Nome"/></f:facet>
                <h:outputText value="#{contato.nome}"/>
            </h:column>

            <h:column>
                <f:facet name="header"><h:outputText value="Setor"/></f:facet>
                <h:outputText value="#{contato.setor}"/>
            </h:column>

            <h:column>
                <f:facet name="header"><h:outputText value="Filial"/></f:facet>
             <h:outputText value="#{contato.filial}"/>
            </h:column>

             <h:column>
                <f:facet name="header"><h:outputText value="C.G.C"/></f:facet>
             <h:outputText value="#{contato.cgc}"/>
            </h:column>

             <h:column>
                <f:facet name="header"><h:outputText value="UF"/></f:facet>
             <h:outputText value="#{contato.uf}"/>
            </h:column>

             <h:column>
                <f:facet name="header"><h:outputText value="Cidade"/></f:facet>
             <h:outputText value="#{contato.cidade}"/>
            </h:column>

             <h:column>
                <f:facet name="header"><h:outputText value="Bairro"/></f:facet>
             <h:outputText value="#{contato.bairro}"/>
            </h:column>

             <h:column>
                <f:facet name="header"><h:outputText value="Logradouro"/></f:facet>
             <h:outputText value="#{contato.logradouro}"/>
            </h:column>

             <h:column>
                <f:facet name="header"><h:outputText value="Cep"/></f:facet>
             <h:outputText value="#{contato.cep}"/>
            </h:column>

           <h:column>
                <f:facet name="header"><h:outputText value="Telefone 1"/></f:facet>
             <h:outputText value="#{contato.telefone1}"/>
            </h:column>

           <h:column>
                <f:facet name="header"><h:outputText value="Telefone 2"/></f:facet>
             <h:outputText value="#{contato.telefone2}"/>
            </h:column>

             <h:column>
                <f:facet name="header"><h:outputText value="Telefone 3"/></f:facet>
                <h:outputText value="#{contato.telefone3}"/>
            </h:column>

              <h:column>
                <f:facet name="header"><h:outputText value="Operações"/></f:facet>
                <h:outputText value=""/>
            </h:column>

         
            <f:facet name="footer">
            <rich:datascroller for="lista"/>

     <rich:jQuery selector="#listaContatos tr:odd" query="addClass('odd-row')" />
        <rich:jQuery selector="#lista tr:even" query="addClass('even-row')" />
        <rich:jQuery selector="#lista tr"
            query="mouseover(function(){jQuery(this).addClass('active-row')})"/>
        <rich:jQuery selector="#listaContatos tr"
            query="mouseout(function(){jQuery(this).removeClass('active-row')})"/>

            </f:facet>
        </rich:dataTable >[/code]
#2

Retire a tag style, vc não vai precisar dela neste caso, mas existem outras formas, uma delas é essa::

 <rich:jQuery selector="#listaContatos tr:odd" query="addClass('odd-row')" />
            <rich:jQuery selector="#lista tr:even" query="addClass('even-row')" />
            <rich:jQuery selector="#lista tr"
                query="mouseover(function(){jQuery(this).css({'background':'#FFEBDA'}).addClass('active-row') })"/>
            <rich:jQuery selector="#listaContatos tr"
                query="mouseout(function(){jQuery(this).css({'background':'#FCFFFE'}).removeClass('active-row') })"/>

Na Tag Style fica:

[code]

.odd-row { background-color: #ECF3FE; } [/code]
#3

Não funfou…O que eu tenho que passar nesse meu selector, tipo:

<rich:jQuery selector="#lista tr:even"

#4