Open div by hovering over input text

Asked

Viewed 482 times

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 I need you to show, by hovering your mouse over 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 tried to get css but it’s not working:

    #mostrar {
    display: none;
}

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

How can I fix it? I thought I’d put like a modal then.

css

  • if #mostrar is not descended from #passarmouse does not work, because your CSS selector is of descent, IE, for any element that has id 'show' and that has a descending id '#passarmouse' apply the properties below..

  • you cannot make a selector (for example #passarmose) select another element (#show). you can act on the selector element itself or on one of the children at most, what you want to do will need to use javascript

  • Guy already trying to use javascript onFocus event for this?

  • 1

    If div #show comes right after div #passarmouse, it should work #passarmouse:hover + #mostrar {&#xA; display: block;&#xA;}

  • @Thayllervilelacia I didn’t try.

1 answer

1


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

By adding the plus sign you will be indicating that the event should be added to the div show

  • The + is the adjacent element selector, does not imply in any way that the event should be added to the div #mostrar. CSS rules are always applied to the rightmost selector.

  • @fernandosavio >> http://jsfiddle.net/ego3cafh/ working this way

  • Marcos, I’m not saying that the code will not work (although Fiddle is not working). What I’m saying is there’s no point in giving a working code and explaining why it’s working wrong. There are no events being added to #mostrar. The #mostrar simply satisfies the selector that is to be an element adjacent to and subsequent to an element #passarmouse who is in the state of :hover.

  • 2

    @fernandosavio is actually working, only for some reason he put the text in white, there it does not seem when it does the :Hover pq the background tb is white. What he could do is give a better explanation even, quote support links etc, but he tb is not obliged to this, goes from each...

  • @Marcosbrinner didn’t work on my example, I thought it was because there was another div on the side that was keeping her from showing up, but even without her, it doesn’t work.

  • 2

    Just to clarify that it is to be a constructive criticism not to confuse who read the answer. It is not a personal attack. @hugocsl, explain or not explain goes of each one, but can not make a statement that is not true, It may be that someone take as truth and learn wrong. But anyway, the comments are there for this. Ball forward

  • After closing the div passarmouse after the div mostrar my code even worked.

  • excellent, that good q of one way or another managed to solve it

  • And I added a class to keep it afloat: .div_teste {&#xA; width: 350px;&#xA; height: 120px;&#xA; background: #ffffff;&#xA; position: absolute;&#xA; z-index: 100;&#xA; top: 30%;&#xA; left: 40%;&#xA; border: 1px solid;&#xA; }

Show 4 more comments

Browser other questions tagged css

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