Div when passing mouse on field does not work

Question

Div when passing mouse on field does not work

Asked 5 years, 11 months ago

Viewed 32 times

1

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.

Which browser did you use and which one are you using now? Test in some browsers and say if any worked. Because of this :placeholder-Shown. I believe that the most updated 2018 work in most, but I do not know if you are using a very old browser.

– Rodrigo Rocha

2018/10/23 at 13:02

1 answer

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.

by hugocsl • **65,517** points · Answer 1 · 2018-10-23T13:05:15+00:00

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?