Alterando o CSS do elemento filho quando o pai é pairado

159

Primeiro de tudo, estou assumindo que isso é muito complexo para CSS3, mas se houver uma solução em algum lugar, eu adoraria ir com isso.

O HTML é bastante direto.

<div class="parent">
    <div class="child">
        Text Block 1
    </div>
</div>

<div class="parent">
    <div class="child">
        Text Block 2
    </div>
</div>

A div filho está configurada para exibir: none; por padrão, mas depois muda para display: block; quando o mouse está sobre o div principal. O problema é que essa marcação aparece em vários lugares do meu site, e eu só quero que o filho seja exibido se o mouse estiver sobre o pai, e não se o mouse estiver sobre qualquer um dos outros pais (todos têm a mesma classe nome e sem IDs).

Eu tentei usar $(this)e .children()sem sucesso.

$('.parent').hover(function(){
            $(this).children('.child').css("display","block");
        }, function() {
            $(this).children('.child').css("display","none");
        });
jquery css jquery-selectors parent Hartley Brody
fonte

Respostas:

260

Por que não usar apenas CSS?

.parent:hover .child, .parent.hover .child { display: block; }

e adicione JS para IE6 (dentro de um comentário condicional, por exemplo) que não suporta: passe o mouse corretamente:

jQuery('.parent').hover(function () {
    jQuery(this).addClass('hover');
}, function () {
    jQuery(this).removeClass('hover');
});

Aqui está um exemplo rápido: Fiddle

Stephen
fonte
esse código não está funcionando para mim. deveria dizer ".parent.hover" e não ".parent: hover" ?? Caso eu nunca tenha visto o que você tem antes. e uma vírgula não indica vários seletores usando os mesmos estilos? não vejo como isso ajuda aqui. um pouco mais informações sobre isso CSS, por favor 0 =]
Hartley Brody
6
:hoveré uma das "pseudo-classes dinâmicas" definidas pelo CSS2 ( aqui está a especificação ). Aqui está um exemplo rápido: http://jsfiddle.net/5FLr4/ . funciona para mim.
Lee
ahh muito obrigado! Na verdade, eu tive algum posicionamento relativo que estava empurrando o texto filho para fora da vista ... doh! >. <agradeço a ajuda!
Hartley Brody
Aparentemente, isso não funcionará para .child :: - webkit-scrollbar-thumb se você quiser alterar o destaque da barra de rolagem dentro do elemento filho.
thdoan
1
.parent:not(:hover) .child { display: none; }parece funcionar bem para mim, embora eu certamente não esteja preocupado com o IE6. Mas dessa maneira eu posso usá-lo em elementos que não quero ter uma displaypropriedade uniforme .
Blair Connolly
147

Não há necessidade de usar JavaScript ou jquery, o CSS é suficiente:

.child{ display:none; }
.parent:hover .child{ display:block; }

VER DEMO

Ali Adravi
fonte
9

Use toggleClass().

$('.parent').hover(function(){
$(this).find('.child').toggleClass('color')
});

onde colorestá a turma Você pode estilizar a classe como quiser para alcançar o comportamento desejado. O exemplo demonstra como a classe é adicionada e removida ao entrar e sair do mouse.

Confira o exemplo de trabalho aqui .

Hussein
fonte
7 
.parent:hover > .child {
    /*do anything with this child*/
}
Amir Rahman
fonte
3

A resposta de Stephen está correta, mas aqui está minha adaptação de sua resposta:

HTML

<div class="parent">
    <p> parent 1 </p>
    <div class="child">
        Text Block 1
    </div>
</div>

<div class="parent">
    <p> parent 2 </p>
    <div class="child">
        Text Block 2
    </div>
</div>

CSS

.parent { width: 100px; min-height: 100px; color: red; }
.child { width: 50px; min-height: 20px; color: blue; display: none; }
.parent:hover .child, .parent.hover .child { display: block; }

jQuery

//this is only necessary for IE and should be in a conditional comment

jQuery('.parent').hover(function () {
    jQuery(this).addClass('hover');
}, function () {
    jQuery(this).removeClass('hover');
});

Você pode ver este exemplo trabalhando em jsFiddle .

Roger Roelofs
fonte
3

Eu tenho o que eu acho que é uma solução melhor, pois é escalável para mais níveis, quantos quiser, não apenas dois ou três.

Uso bordas, mas isso também pode ser feito com qualquer estilo desejado, como a cor de fundo.

Com a fronteira, a idéia é:

  • Tenha uma cor de borda diferente em apenas uma div, a div sobre o local onde o mouse está, não em nenhum pai, nem em nenhum filho, para que possa ser vista apenas essa borda div em uma cor diferente, enquanto o restante permanece em branco.

Você pode testá-lo em: http://jsbin.com/ubiyo3/13

E aqui está o código:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Hierarchie Borders MarkUp</title>
<style>

  .parent { display: block; position: relative; z-index: 0;
            height: auto; width: auto; padding: 25px;
          }

  .parent-bg { display: block; height: 100%; width: 100%; 
               position: absolute; top: 0px; left: 0px; 
               border: 1px solid white; z-index: 0; 
             }
  .parent-bg:hover { border: 1px solid red; }

  .child { display: block; position: relative; z-index: 1; 
           height: auto; width: auto; padding: 25px;
         }

  .child-bg { display: block; height: 100%; width: 100%; 
              position: absolute; top: 0px; left: 0px; 
              border: 1px solid white; z-index: 0; 
            }
  .child-bg:hover { border: 1px solid red; }

  .grandson { display: block; position: relative; z-index: 2; 
              height: auto; width: auto; padding: 25px;
            }

  .grandson-bg { display: block; height: 100%; width: 100%; 
                 position: absolute; top: 0px; left: 0px; 
                 border: 1px solid white; z-index: 0; 
               }
  .grandson-bg:hover { border: 1px solid red; }

</style>
</head>
<body>
  <div class="parent">
    Parent
    <div class="child">
      Child
      <div class="grandson">
        Grandson
        <div class="grandson-bg"></div>
      </div>
      <div class="child-bg"></div>
    </div>
    <div class="parent-bg"></div>
  </div>
</body>
</html>
z666zz666z
fonte
Isso não faz o que a pergunta foi feita. Ele altera a borda ao redor do elemento que está passando o mouse. Não é a borda em torno de um elemento filho.
jenniwren
2

Se você estiver usando o estilo de inicialização do Twitter e o JS base em um menu suspenso:

.child{ display:none; }
.parent:hover .child{ display:block; }

Esta é a peça que falta para criar listas suspensas (que não são irritantes)

  • O comportamento é:
    1. Mantenha-se aberto quando clicado, feche ao clicar novamente em qualquer outro lugar da página
    2. Feche automaticamente quando o mouse sair dos elementos do menu.
R Tobin
fonte
2

Não tenho certeza se existem motivos terríveis para fazer isso ou não, mas parece funcionar comigo na versão mais recente do Chrome / Firefox, sem problemas visíveis de desempenho, com muitos elementos na página.

*:not(:hover)>.parent-hover-show{
    display:none;
}

Porém, dessa forma, tudo o que você precisa é aplicar parent-hover-showa um elemento e o restante é resolvido, e você pode manter o tipo de exibição padrão que desejar, sem que ele sempre seja "bloco" ou crie várias classes para cada tipo.

Brian Leishman
fonte
0

Para alterá-lo de css, você nem precisa definir a classe filho

.parent > div:nth-child(1) { display:none; }
.parent:hover > div:nth-child(1) { display: block; }
hamboy75
fonte