Open div when mouseover over input text

1

I have this div, where the input text is inside:

   <div class="col-md-4" id="passarmouse">
                        <input type="text" asp-for="FornecedorID" onkeypress="return BuscaDados(event);" onblur="CarregaFornecedor(this.value);" class="form-control" name="FornecedorID" id="idfornecedor" />
                    </div>

And this is the div that I need to show by hovering on the div passarmouse ,

<div class="col-md-4" id="mostrar">
                <div class="col-md-12">
                    <label class="control-label" id="fornecedor"></label>
                </div>
                <div class="col-md-12">
                    <label class="control-label" id="nomefornecedor"></label>
                </div>
                <div class="col-md-12">
                    <label class="control-label" id="ruafornecedor"></label>
                    <label class="control-label" id="nfornecedor"></label>
                </div>
                <div class="col-md-12">
                    <label class="control-label" id="bairrofornecedor"></label>
                    <label class="control-label" id="cidadefornecedor"></label>
                </div>
            </div>

I've tried css but it's not working:

    #mostrar {
    display: none;
}

#passarmouse:hover #mostrar {
    display: block;
}

How can I solve it? I thought I'd type a modal then.

    
asked by anonymous 10.09.2018 / 22:30

1 answer

1

Switch your css to

#mostrar {
    display: none;
}

#passarmouse:hover + #mostrar {
    display: block;
}
 <div class="col-md-4" id="passarmouse">
     <input type="text" asp-for="FornecedorID" onkeypress="return BuscaDados(event);" onblur="CarregaFornecedor(this.value);" class="form-control" name="FornecedorID" id="idfornecedor" />
 </div>
                    
<div class="col-md-4" id="mostrar">
   <div class="col-md-12">
    <label class="control-label" id="fornecedor">aaa</label>
   </div>
   <div class="col-md-12">
     <label class="control-label" id="nomefornecedor">bbb</label>
   </div>
   <div class="col-md-12">
     <label class="control-label" id="ruafornecedor">ccc</label>
     <label class="control-label" id="nfornecedor">ddd</label>
   </div>
   <div class="col-md-12">
      <label class="control-label" id="bairrofornecedor">eee</label>
      <label class="control-label" id="cidadefornecedor">fff</label>
    </div>
</div>

When you add the plus sign you are indicating that the event should be added to the show div

    
10.09.2018 / 22:50