Div when mouseover in the field does not work

Question

Div when mouseover in the field does not work

Navigation

#1 by (2 votes)

2

I have this function, which worked fine, now I do not know why it does not work, I think I'm forgetting 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 to move the mouse in the field and it is populated, it appears to div , but it is not appearing, in any way, this works well for me, but now it has stopped.

html css

asked by anonymous 23.10.2018 / 14:54

1 answer

Incorrect PostgreSQL Daylight Saving Time What would be the correct way to check if a value exists in the table in Lua?

score 2 · Accepted Answer

Your problem is that the + switch picks up the adjacent sibling and you actually need to pick up a brother who is not the brother next door, but who is below, so you need to change by ~

See how it goes

#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 does the + sign mean in CSS?