Appear button when mouseover javascript

Navigation
0

I'm developing an application in jsf, css, javascrip where when you move the mouse on the product there will appear a "Learn more" button and when you take the mouse the button know more disappears, only the first item is functioning for the rest is not I'll 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 the javascript function

    
asked by anonymous 05.07.2017 / 22:00

2 answers

0

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

Your role: 

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

Switch to 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');
06.07.2017 / 00:19
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: link

    
05.07.2017 / 23:57
How to program a button in the unity that after being clicked, show a text with information on the screen? Upload with ajax and java