Div when passing mouse on field does not work

Question

I have this function, which worked well, now I don’t know why it doesn’t work, I think I’m missing some detail. This is the 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>

I need that when passing the mouse on the field and it is filled, appear the div, but it’s not showing up at all, it worked well for me, but now it’s stopped.

Answer 1

Your problem is that the dial + picks up the adjacent brother and you need to actually pick up a brother who is not the next brother but who is further down, so you need to change the + for ~

See how it looks

#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>

TIP: Read this answer that will help you understand how these selectors work What the + sign in CSS means?