1

Eu tenho esta função, que funcionava bem, agora não sei por qual motivo não funciona, acho que estou esquecendo de algum detalhe. Este é o CSS:

#mostrar {
  display: none;
}

#CodigoCobrancaID:not(:placeholder-shown):hover+#mostrar {
  display: block;
}

.div_teste {
  width: 350px;
  height: 120px;
  background: #ffffff;
  position: absolute;
  z-index: 100;
  top: 30%;
  left: 40%;
  border: 1px solid;
}

<label asp-for="FormaCobrancaID" class="col-md-3 control-label" style="text-align:left;"></label>
<div class="col-md-3" id="passarmouse">
  <input name="CodigoCobrancaID" type="text" id="CodigoCobrancaID" onkeypress="return BuscaDadosFormaCobranca(event);" class="form-control" placeholder="campo vazio" />
  <input asp-for="FormaCobrancaID" placeholder="campo vazio" name="FormaCobrancaID" id="FormaCobrancaID" type="hidden" />
  <span asp-validation-for="FormaCobrancaID" class="text-danger"></span>
  <div class="col-md-5 div_teste" id="mostrar">
    <div class="col-md-12">
      <label class="control-label" id="codigocobranca"></label>
      <br />
      <label class="control-label" id="npagamento"></label>
      <br />
      <label class="control-label" id="formacalculo"></label>
    </div>
  </div>
</div>

Eu preciso que ao passar o mouse no campo e ele estiver preenchido, aparecer a div, porém não está aparecendo, de nenhuma forma, isso funcionava bem pra mim, mas agora parou.

1
  • Qual o navegador que você usava e qual está usando agora? Teste em alguns navegadores e diga se em algum funcionou. Por causa desse :placeholder-shown. Creio que nos mais atualizados de 2018 funcione na maioria, porém não sei se está usando um navegador bem antigo. Commented 23/10/2018 às 13:02

1 Resposta 1

2

Seu problema é que o seletor + pega o irmão adjacente e vc precisa pegar na verdade um irmão que não é o irmão ao lado, mas que está mais abaixo, então vc precisa trocar o + por ~

Veja como fica

#mostrar {
    display: none;
}

#CodigoCobrancaID:not(:placeholder-shown):hover ~ #mostrar {
    display: block;
}

.div_teste {
    width: 350px;
    height: 120px;
    background: #ffffff;
    /* position: absolute; */
    z-index: 100;
    top: 30%;
    left: 40%;
    border: 1px solid;
}
<label asp-for="FormaCobrancaID" class="col-md-3 control-label" style="text-align:left;"></label>
<div class="col-md-3" id="passarmouse">
<input name="CodigoCobrancaID" type="text" id="CodigoCobrancaID" onkeypress="return BuscaDadosFormaCobranca(event);" class="form-control" placeholder="campo vazio"/>
<input asp-for="FormaCobrancaID" placeholder="campo vazio" name="FormaCobrancaID" id="FormaCobrancaID" type="hidden" />
<span asp-validation-for="FormaCobrancaID" class="text-danger"></span>
<div class="col-md-5 div_teste" id="mostrar">
    <div class="col-md-12">
        <label class="control-label" id="codigocobranca"></label>
        <br />
        <label class="control-label" id="npagamento"></label>
        <br />
        <label class="control-label" id="formacalculo"></label>
    </div>
</div>

DICA: Leia essa reposta que vai te ajudar a entender como funcionam esses seletores O que significa o sinal de + no CSS?

2
  • Isso mesmo, obrigado.
    – Mariana
    Commented 23/10/2018 às 13:08
  • @marianac_costa tranquilo, não deixe de dar uma olhadinha no link que citei na DICA, vai te ajudar a entender esses seletores ;)
    – hugocsl
    Commented 23/10/2018 às 13:09

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 .