2

Boa tarde pessoal. Minha dúvida é a seguinte, estou criando um form de pagamento, tenho o seguinte código:

$(".spanhover").hover(function(event) {
    var divid = "#popup1"
    $(divid).css({top: event.clientY, left: event.clientX}).show();
}, function() {
    var divid = "#popup1"
    $(divid).hide();
});
.credit-card-box .panel-title {
	    display: inline;
	    font-weight: bold;
	}
	.credit-card-box .form-control.error {
	    border-color: red;
	    outline: 0;
	    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(255,0,0,0.6);
	}
	.credit-card-box label.error {
	  font-weight: bold;
	  color: red;
	  padding: 2px 8px;
	  margin-top: 2px;
	}
	.credit-card-box .payment-errors {
	  font-weight: bold;
	  color: red;
	  padding: 2px 8px;
	  margin-top: 2px;
	}
	.credit-card-box label {
	    display: block;
	}
	
	.credit-card-box .display-table {
	    display: table;
	}
	.credit-card-box .display-tr {
	    display: table-row;
	}
	.credit-card-box .display-td {
	    display: table-cell;
	    vertical-align: middle;
	    width: 50%;
	}
	
	.credit-card-box .panel-heading img {
	    min-width: 180px;
	}
  
  .spanhover {
    cursor: pointer;
  }
  .popup {
    position: absolute;
    display: none;
    width: 50px;
    height: 50px;
    border: 1px solid #000;
    z-index: 999;
    background-color: #fff;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<html>
<head>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
   
  <div class="panel panel-default credit-card-box">
			                <div class="panel-heading" style="min-height: 40px;">
			                    <div class="col-md-7" >
			                        <h3 class="panel-title display-td">Meio de pagamento</h3>
			                    </div>
			                    <div class="col-md-5">
			                    	<i class="fa fa-2x fa-cc-visa"></i><i class="fa fa-2x fa-cc-mastercard"></i>
			                    </div>                    
			                </div>
			                <div class="panel-body">
			                	<div class="row text-center">
			                		<h4>Dados do proprietário do cartão*</h4>
			                	</div>
			                	<div class="row">
		                            <div class="col-xs-12">
		                                <div class="form-group">
		                                    <label for="cardNumber" style="	top:-15px !important;
																			font-size:14px !important;
																			color:#5264AE !important;">Nome completo</label>
		                                    <div class="form-group">
		                                        <input 
		                                            type="text"
		                                            class="form-control"
		                                            name="cardName"
		                                            placeholder="Nome (conforme escrito no cartão)"
		                                            autocomplete="cc-name"
		                                            required autofocus 
		                                        />
		                                    </div>
		                                </div>                            
		                            </div>
		                        </div>
			                	<div class="row">
			                		<div class="col-xs-8">
		                                <div class="form-group">
		                                    <label for="cardNumber" style="	top:-15px !important;
																			font-size:14px !important;
																			color:#5264AE !important;">cpf</label>
		                                    <div class="form-group">
		                                        <input 
		                                            type="tel"
		                                            class="form-control"
		                                            name="cpf"
		                                            placeholder="CPF"
		                                            autocomplete="cpf"
		                                            required 
		                                        />
		                                    </div>
		                                </div>                            
		                            </div>
		                            <div class="col-xs-4">
		                                <div class="form-group">
		                                    <label for="cardNumber" style="	top:-15px !important;
																			font-size:14px !important;
																			color:#5264AE !important;">Nascimento</label>
		                                    <div class="form-group">
		                                        <input 
		                                            type="tel"
		                                            class="form-control"
		                                            name="birthDate"
		                                            placeholder="dd/mm/aaaa"
		                                            autocomplete="dt-nasc"
		                                            required
		                                        />
		                                    </div>
		                                </div>                            
		                            </div>
			                	</div>
		                        <div class="row">
		                            <div class="col-xs-12">
		                                <div class="form-group">
		                                    <label for="cardNumber" style="	top:-15px !important;
																			font-size:14px !important;
																			color:#5264AE !important;">Número do cartão</label>
		                                    <div class="input-group">
		                                        <input 
		                                            type="tel"
		                                            class="form-control"
		                                            name="cardNumber"
		                                            placeholder="Número do cartão"
		                                            autocomplete="cc-number"
		                                            required
		                                        />
		                                        <span class="input-group-addon"><i class="fa fa-credit-card"></i></span>
		                                    </div>
		                                </div>                            
		                            </div>
		                        </div>
		                        <div class="row">
		                            <div class="col-xs-7 col-md-7">
		                                <div class="form-group">
		                                    <label for="cardExpiry" style="	top:-15px !important;
																			font-size:14px !important;
																			color:#5264AE !important;"><span class="hidden-xs">Expira em</span><span class="visible-xs-inline">Data</span></label>
			                                    <input 
			                                        type="tel" 
			                                        class="form-control" 
			                                        name="cardExpiry"
			                                        placeholder="MM / AA"
			                                        autocomplete="cc-exp"
			                                        required 
			                                    />
		                                </div>
		                            </div>
                                <div class="popup" id="popup1" style="display:none;">test1</div>
		                            <div class="col-xs-5 col-md-5 pull-right">
		                                <div class="form-group">
		                                    <label for="cardCVC" class="spanhover" id="hover1" style="	top:-15px !important;
																			font-size:14px !important;
																			color:#5264AE !important;">CVC</label>
			                                    <input 
			                                        type="tel" 
			                                        class="form-control"
			                                        name="cardCVC"
			                                        placeholder="CVC"
			                                        autocomplete="cc-csc"
			                                        required
			                                    />
		                                </div>
		                            </div>
		                        </div>
		                        <div class="row">
		                        	<div class="col-xs-12">
		                        		<p class="small btn-danger text-center">* estes dados não são armazenados.</p>
		                        	</div>
		                        </div>
		                        <div class="row" style="display:none;">
		                            <div class="col-xs-12">
		                                <p class="payment-errors"></p>
		                            </div>
		                        </div>
			                    <div class="row">
			                    	<div class="col-xs-12">
			                    		<input type="submit" class="btn btn-success btn-block" value="Finalizar">
			                    	</div>
			                    </div>
			                </div>
			            </div>
                  </body>
                  </html>

A idéia era mostrar uma imagem de como encontrar o CVC no cartão, para isso colocaria isso em uma div que apareceria ao passar o mouse por cima do campo CVC, o resultado é que a div acompanhe o cursor enquanto ele estiver em cima da label, porém fiquei preso e daqui não consigo passar... alguém pode me dar uma luz?

2
  • Eu particularmente não vejo a necessidade de a div acompanhar o mouse pela label, até pq a label é pequena, só tem 3 letras.
    – LeAndrade
    23/11/2018 às 18:59
  • Eu pretendo utilizar isto em outros pontos do sistema 23/11/2018 às 19:07

2 Respostas 2

5

Esta seria uma possível solução, basta substituir pelo que você precisar:

 $( "#holder" ).on( "mousemove", function( event ) {
        $("#popover").show().css({left:event.pageX, top:event.pageY } )
 })
 $( "#holder" ).on('mouseleave',function(){
 $('#popover').hide()
 })
#holder{
  width: 150px;
  height: 50px;
  background: #000;
}
#popover{
  cursor: default;
  display:none;
  height: 20px;
  background: #f00;
  position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<br></br>
<div id="holder">
  <div id="popover">
    CVC
  </div>
</div>

Quando passa com o mouse sobre o #holder, adicionar a posição do mouse como offset do #popover e ao sair do #holder esconde-o.

4
  • Não funciona, jovem. Os pageX e pageY pegam a posição absoluta do cursor em relação a janela toda. É preciso fazer os tratamentos que citei na minha resposta.
    – Sam
    23/11/2018 às 19:50
  • Se vc adicionar uns <br> antes da sua div, vai ver que o popover vai aparecer bem longe do cursor.
    – Sam
    23/11/2018 às 19:52
  • Verdade, faltou tirar o position relative da div #holder 23/11/2018 às 19:56
  • Agora melhorou!
    – Sam
    23/11/2018 às 19:59
2

Em vez de usar .hover, que escuta dois eventos, mouseenter e mouseleave, você precisaria usar dois eventos, mousemove e mouseleave. O primeiro fará o elemento acompanhar o cursor enquanto você move ele e o segundo irá ocultar a div.

Para que o cursor não fique por cima da div, adicione uma diferença nos valores da posição do cursor. No caso, adicionei 5px no eixo X e subtraí a altura da div no eixo Y, porém ainda é necessário compensar a posição somando o valor do scroll da janela:

$(".spanhover").on("mousemove mouseleave", function(event) {
   
   var divid = "#popup1";
   if(event.type == "mouseleave"){
      $(divid).hide();
   }else{
      var divid_height = $(divid).height(); // altura da div
      var scrolTop = $(window).scrollTop(); // scroll da janela
      $(divid).css({
         top: event.clientY-divid_height+scrolTop,
         left: event.clientX+5
      }).show();
   }
   
});
.spanhover{
   cursor: pointer;
}
.credit-card-box .panel-title {
	    display: inline;
	    font-weight: bold;
	}
	.credit-card-box .form-control.error {
	    border-color: red;
	    outline: 0;
	    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(255,0,0,0.6);
	}
	.credit-card-box label.error {
	  font-weight: bold;
	  color: red;
	  padding: 2px 8px;
	  margin-top: 2px;
	}
	.credit-card-box .payment-errors {
	  font-weight: bold;
	  color: red;
	  padding: 2px 8px;
	  margin-top: 2px;
	}
	.credit-card-box label {
	    display: block;
	}
	
	.credit-card-box .display-table {
	    display: table;
	}
	.credit-card-box .display-tr {
	    display: table-row;
	}
	.credit-card-box .display-td {
	    display: table-cell;
	    vertical-align: middle;
	    width: 50%;
	}
	
	.credit-card-box .panel-heading img {
	    min-width: 180px;
	}
  
  .spanhover {
    cursor: pointer;
  }
  .popup {
    position: absolute;
    display: none;
    width: 50px;
    height: 50px;
    border: 1px solid #000;
    z-index: 999;
    background-color: #fff;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<html>
<head>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
   
  <div class="panel panel-default credit-card-box">
			                <div class="panel-heading" style="min-height: 40px;">
			                    <div class="col-md-7" >
			                        <h3 class="panel-title display-td">Meio de pagamento</h3>
			                    </div>
			                    <div class="col-md-5">
			                    	<i class="fa fa-2x fa-cc-visa"></i><i class="fa fa-2x fa-cc-mastercard"></i>
			                    </div>                    
			                </div>
			                <div class="panel-body">
			                	<div class="row text-center">
			                		<h4>Dados do proprietário do cartão*</h4>
			                	</div>
			                	<div class="row">
		                            <div class="col-xs-12">
		                                <div class="form-group">
		                                    <label for="cardNumber" style="	top:-15px !important;
																			font-size:14px !important;
																			color:#5264AE !important;">Nome completo</label>
		                                    <div class="form-group">
		                                        <input 
		                                            type="text"
		                                            class="form-control"
		                                            name="cardName"
		                                            placeholder="Nome (conforme escrito no cartão)"
		                                            autocomplete="cc-name"
		                                            required autofocus 
		                                        />
		                                    </div>
		                                </div>                            
		                            </div>
		                        </div>
			                	<div class="row">
			                		<div class="col-xs-8">
		                                <div class="form-group">
		                                    <label for="cardNumber" style="	top:-15px !important;
																			font-size:14px !important;
																			color:#5264AE !important;">cpf</label>
		                                    <div class="form-group">
		                                        <input 
		                                            type="tel"
		                                            class="form-control"
		                                            name="cpf"
		                                            placeholder="CPF"
		                                            autocomplete="cpf"
		                                            required 
		                                        />
		                                    </div>
		                                </div>                            
		                            </div>
		                            <div class="col-xs-4">
		                                <div class="form-group">
		                                    <label for="cardNumber" style="	top:-15px !important;
																			font-size:14px !important;
																			color:#5264AE !important;">Nascimento</label>
		                                    <div class="form-group">
		                                        <input 
		                                            type="tel"
		                                            class="form-control"
		                                            name="birthDate"
		                                            placeholder="dd/mm/aaaa"
		                                            autocomplete="dt-nasc"
		                                            required
		                                        />
		                                    </div>
		                                </div>                            
		                            </div>
			                	</div>
		                        <div class="row">
		                            <div class="col-xs-12">
		                                <div class="form-group">
		                                    <label for="cardNumber" style="	top:-15px !important;
																			font-size:14px !important;
																			color:#5264AE !important;">Número do cartão</label>
		                                    <div class="input-group">
		                                        <input 
		                                            type="tel"
		                                            class="form-control"
		                                            name="cardNumber"
		                                            placeholder="Número do cartão"
		                                            autocomplete="cc-number"
		                                            required
		                                        />
		                                        <span class="input-group-addon"><i class="fa fa-credit-card"></i></span>
		                                    </div>
		                                </div>                            
		                            </div>
		                        </div>
		                        <div class="row">
		                            <div class="col-xs-7 col-md-7">
		                                <div class="form-group">
		                                    <label for="cardExpiry" style="	top:-15px !important;
																			font-size:14px !important;
																			color:#5264AE !important;"><span class="hidden-xs">Expira em</span><span class="visible-xs-inline">Data</span></label>
			                                    <input 
			                                        type="tel" 
			                                        class="form-control" 
			                                        name="cardExpiry"
			                                        placeholder="MM / AA"
			                                        autocomplete="cc-exp"
			                                        required 
			                                    />
		                                </div>
		                            </div>
                                <div class="popup" id="popup1" style="display:none;">test1</div>
		                            <div class="col-xs-5 col-md-5 pull-right">
		                                <div class="form-group">
		                                    <label for="cardCVC"  id="hover1" class="spanhover" style="	top:-15px !important;
																			font-size:14px !important;
																			color:#5264AE !important;">CVC</label>
			                                    <input 
			                                        type="tel" 
			                                        class="form-control"
			                                        name="cardCVC"
			                                        placeholder="CVC"
			                                        autocomplete="cc-csc"
			                                        required
			                                    />
		                                </div>
		                            </div>
		                        </div>
		                        <div class="row">
		                        	<div class="col-xs-12">
		                        		<p class="small btn-danger text-center">* estes dados não são armazenados.</p>
		                        	</div>
		                        </div>
		                        <div class="row" style="display:none;">
		                            <div class="col-xs-12">
		                                <p class="payment-errors"></p>
		                            </div>
		                        </div>
			                    <div class="row">
			                    	<div class="col-xs-12">
			                    		<input type="submit" class="btn btn-success btn-block" value="Finalizar">
			                    	</div>
			                    </div>
			                </div>
			            </div>
                  </body>
                  </html>

1
  • 1
    Excelente, era exatamente o que eu precisava! 23/11/2018 às 19:20

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .