Show button when hovering javascript

Question

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

Answer 1

See this example with Jquery:

$(document).ready(function () {
    $(document).on('mouseenter', '.divbutton', function () {
        $(this).find(":button").show();
    }).on('mouseleave', '.divbutton', function () {
        $(this).find(":button").hide();
    });
});

Demo: http://jsfiddle.net/kurbhatt/FWG8R/

Answer 2

Apparently you are not using the id property, passed as a parameter in the function. Look at you:

Its function:

<script language="JavaScript">
    function mostrarElemento(id, visibilidade) {
       document.getElementById("saiba_mais").style.display = visibilidade;
    }
</script>

Trade for this:

<script language="JavaScript">
    function mostrarElemento(id, visibilidade) {
       document.getElementById(id).style.display = visibilidade;
    }
</script>

And in the function call, pass the identifier of the element you want to display: Example:

<a href="#"  onMouseOver="mostrarElemento('saiba_mais', 'inline');
<a href="#"  onMouseOver="mostrarElemento('saiba_mais2', 'none');
<a href="#"  onMouseOver="mostrarElemento('saiba_mais3', 'inline');

I hope I’ve helped.