Como esconder uma div e mostrar com evento MouseOver?

Front-end

24/07/2014

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.

Curtidas 0

Melhor post

Raphael Souza

Raphael Souza

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.
GOSTEI 1

Mais Respostas

Wellington Silva

Wellington Silva

24/07/2014

coloca a div com o texto cinza invisivel, e no evento "hover" do fieldset manda o div cinza ficar visivel
GOSTEI 0
Raphael Souza

Raphael Souza

24/07/2014

Cadê a estrutura do código????
GOSTEI 0
Celiol.

Celiol.

24/07/2014

Mas é que to querendo fazer com um efeito entendeu....
GOSTEI 0
Celiol.

Celiol.

24/07/2014

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>
GOSTEI 0
Celiol.

Celiol.

24/07/2014

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

Celiol.

24/07/2014

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

Grato Delivery-TI.
GOSTEI 0
Joseildo Souza

Joseildo Souza

24/07/2014

e se for usar duas divs ou mais....
GOSTEI 0
Joseildo Souza

Joseildo Souza

24/07/2014

como se faz?
GOSTEI 0
Celiol.

Celiol.

24/07/2014

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.
GOSTEI 0
POSTAR