GARANTIR DESCONTO

Fórum Como esconder uma div e mostrar com evento MouseOver? #486660

24/07/2014

0

Front-end

Ola galera estou com um problema acredito que com CSS apenas consigo resolver porem tentei varias coisas aqui e nao tive sucesso.

Seguinte, tenho uma tela login que é uma modal, encima tenho a header que esta o texto faça login (azul), abaixo tenho uma pequena div com um texto(cinza) como podem ver na imagem, o restando abaixo (branco) e um fieldset que tem os campos para logar. BLZ.

Pois bem quero esconder este texto (parte cinza) embaixo da parte azul, e so mostrar quando o usuario for com o mouse encima do fieldset.

Alguem pode dar uma ajuda ai?

Grato Delivery TI.
Celiol.

Celiol.

Responder

Post mais votado

28/07/2014

Segue resposta de acordo com seu código. Será feito basicamente manipulação em jquery e css.


CSS

.msgLogin{ display: none; }


jquery


$(document).ready(function(){

var fieldset = $('.filLogin');
var msgLogin = $('.msgLogin');

fieldset.mouseover(function(){
  msgLogin.fadeIn();
});

fieldset.mouseleave(function(){
   msgLogin.fadeOut();
});


});


Tem como simplificar colocando tudo dentro de uma única function de verificação, mas para fins didáticos coloquei eventos separados.

Raphael Souza

Raphael Souza
Responder

Gostei + 1

Mais Posts

24/07/2014

Wellington Silva

coloca a div com o texto cinza invisivel, e no evento "hover" do fieldset manda o div cinza ficar visivel
Responder

Gostei + 0

24/07/2014

Raphael Souza

Cadê a estrutura do código????
Responder

Gostei + 0

25/07/2014

Celiol.

Mas é que to querendo fazer com um efeito entendeu....
Responder

Gostei + 0

25/07/2014

Celiol.

Olha como esta meu codigo

   <asp:Panel ID="pnlpopup" runat="server">
                        <div class="term">
                            <div class="text_jan">
//olha aqui é divi azul que falei que fica o texto para fazer o login
                                <div class="headerLogin">
                                    <p class="header-ModalLogin">Faça Login</p>
                                </div>
                            </div>
                            <fieldset class="filLogin">
 // aqui esta a div que quero esconder e aparecer somente quando o mouse estiver sobre o fieldset
                             <div class="msgLogin">
                                <p class="lg">Faça Login ou</p><a class="lnk" href="cadastro.aspx">cadastre-se</a><p class="lg1"> para ter acesso a todo conteudo!</p>
                             </div>                          
                                              
                            </fieldset>
                          
                            </div>
                    </asp:Panel>
Responder

Gostei + 0

28/07/2014

Celiol.

A estrutura é esta Neves eu vi um exemplo aqui com jquery mas nao deu certo.
Responder

Gostei + 0

04/08/2014

Celiol.

Perfeito cara deu certinho ate fiz um outro teste aqui e ficou muito bom.

Grato Delivery-TI.
Responder

Gostei + 0

21/11/2014

Joseildo Souza

e se for usar duas divs ou mais....
Responder

Gostei + 0

21/11/2014

Joseildo Souza

como se faz?
Responder

Gostei + 0

22/11/2014

Celiol.

como assim duas divis nao entendi direito o que voce quer fazer, porem segue o mesmo raciocio do meu codugo cara, so que na hora de aparecer voce vai ter que alinhas as divs no css, se as duas tiverem o mesmo css vai uma sobrepor a outra entendeu.
Responder

Gostei + 0

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar