0
I am developing an application in jsf,css,javascrip in which when passing the mouse in the product will appear a button "Learn more" and when taking the mouse the button know more disappears , is working only the first item for the rest this not worked I will put my JAVASCRIP and xhtml.
<script language="JavaScript">
function mostrarElemento(id, visibilidade) {
document.getElementById("saiba_mais").style.display = visibilidade;
}
</script>
<h:panelGroup layout="block" styleClass="features_items"><!--features_items-->
<h2 class="title text-center">Itens</h2>
<b:column col-sm="4">
<h:panelGroup layout="block" styleClass="product-image-wrapper">
<h:panelGroup layout="block" styleClass="single-products">
<h:panelGroup layout="block" styleClass="productinfo text-center">
<a href="#" onMouseOver="mostrarElemento('saiba_mais', 'inline');"
onMouseOut="mostrarElemento('saiba_mais', 'none');">
<h:graphicImage library="imagens" name="feminino.jpeg" width="200px" height= "200px" class="carousel"/>
<p class="descricao_produto">Bermuda lacoste</p>
<h4>A partir de R$56,99
<button class="saiba_mais" id="saiba_mais" >SAIBA MAIS</button>
</h4>
</a>
</h:panelGroup>
</h:panelGroup>
</h:panelGroup>
</b:column>
<b:column col-sm="4">
<h:panelGroup layout="block" styleClass="product-image-wrapper">
<h:panelGroup layout="block" styleClass="single-products">
<h:panelGroup layout="block" styleClass="productinfo text-center">
<h:graphicImage library="imagens" name="feminino.jpeg" width="200px" height= "200px" class="carousel"/>
<a href="#" onMouseOver="mostrarElemento('saiba_mais', 'inline');"
onMouseOut="mostrarElemento('saiba_mais', 'none');">
<p class="descricao_produto">Calça Jeans Armani</p>
<h4> A partir de R$134,99
<button class="saiba_mais" id="saiba_mais2">SAIBA MAIS</button>
</h4>
</a>
</h:panelGroup>
<b:column col-sm="4">
<h:panelGroup layout="block" styleClass="product-image-wrapper">
<h:panelGroup layout="block" styleClass="single-products">
<h:panelGroup layout="block" styleClass="productinfo text-center">
<a href="#" onMouseOver="mostrarElemento('saiba_mais', 'inline');"
onMouseOut="mostrarElemento('saiba_mais', 'none');">
<h:graphicImage library="imagens" name="feminino.jpeg" width="200px" height= "200px" class="carousel"/>
<p class="descricao_produto">Camisa Polo RalpLoren</p>
<h4> A partir de R$56,99
<button class="saiba_mais" id="saiba_mais2">SAIBA MAIS</button>
</h4>
</a>
</h:panelGroup>
</h:panelGroup>
</h:panelGroup>
</b:column>
<b:column col-sm="4">
<h:panelGroup layout="block" styleClass="product-image-wrapper">
<h:panelGroup layout="block" styleClass="single-products">
<h:panelGroup layout="block" styleClass="productinfo text-center">
<a href="#" onMouseOver="mostrarElemento('saiba_mais', 'inline');"
onMouseOut="mostrarElemento('saiba_mais', 'none');">
<h:graphicImage library="imagens" name="feminino.jpeg" width="200px" height= "200px" class="carousel"/>
<p class="descricao_produto">Camisa Polo lacoste</p>
<h4>A parti de R$56,99
<button class="saiba_mais" id="saiba_mais2">SAIBA MAIS</button>
</h4>
</a>
</h:panelGroup>
</h:panelGroup>
</h:panelGroup>
</b:column>
<b:column col-sm="4">
<h:panelGroup layout="block" styleClass="product-image-wrapper">
<h:panelGroup layout="block" styleClass="single-products">
<h:panelGroup layout="block" styleClass="productinfo text-center">
<a href="#" onMouseOver="mostrarElemento('saiba_mais', 'inline');"
onMouseOut="mostrarElemento('saiba_mais', 'none');">
<h:graphicImage library="imagens" name="feminino.jpeg" width="200px" height= "200px" class="carousel"/>
<p class="descricao_produto">Camiseta Gucci</p>
<h4> A partir de R$56,99
<button class="saiba_mais" id="saiba_mais2">SAIBA MAIS</button>
</h4>
</a>
</h:panelGroup>
</h:panelGroup>
</h:panelGroup>
</b:column>
<b:column col-sm="4">
<h:panelGroup layout="block" styleClass="product-image-wrapper">
<h:panelGroup layout="block" styleClass="single-products">
<h:panelGroup layout="block" styleClass="productinfo text-center">
<a href="#" onMouseOver="mostrarElemento('saiba_mais', 'inline');"
onMouseOut="mostrarElemento('saiba_mais', 'none');">
<h:graphicImage library="imagens" name="feminino.jpeg" width="200px" height= "200px" class="carousel"/>
<p class="descricao_produto">Camiseta Social Fendi</p>
<h4> A partir de R$265,99
<button class="saiba_mais" id="saiba_mais2"><span class="ico ico-
search" ></span>SAIBA MAIS</button>
</h4>
</a>
</h:panelGroup>
</h:panelGroup>
</h:panelGroup>
Look at the result only item 1 worked with javascript function
We do not put solved in the title of the question, we know that the problem has been solved when there is an answer marked as accepted
– Denis Rudnei de Souza
I’ll take the solved
– User1999