Modifica del CSS dell'elemento figlio quando viene spostato il genitore

159

Prima di tutto, suppongo che sia troppo complesso per CSS3, ma se c'è una soluzione lì dentro da qualche parte, mi piacerebbe andare con quello invece.

L'HTML è piuttosto semplice.

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

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

Il div figlio è impostato per visualizzare: nessuno; per impostazione predefinita, ma cambia in display: block; quando il mouse viene posizionato sul div genitore. Il problema è che questo markup appare in diversi punti del mio sito e voglio che il bambino venga visualizzato solo se il mouse si trova sopra il suo genitore e non se il mouse si trova su uno degli altri genitori (tutti hanno la stessa classe nome e nessun ID).

Ho provato a usare $(this)e .children()senza risultati.

$('.parent').hover(function(){
            $(this).children('.child').css("display","block");
        }, function() {
            $(this).children('.child').css("display","none");
        });

— Hartley Brody
fonte

260

Perché non usare solo CSS?

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

e poi aggiungi JS per IE6 (all'interno di un commento condizionale per esempio) che non supporta: passa il mouse correttamente:

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

Ecco un breve esempio: violino

— Stefano
fonte

quel codice non funziona per me. dovrebbe dire ".parent.hover" e non ".parent: hover" ?? caso non ho mai visto quello che hai prima. e una virgola non indica più selettori che assumono gli stessi stili? non vedo come questo aiuti qui. qualche informazione in più su quel CSS, per favore 0 =]

— Hartley Brody,

6

:hoverè una delle "pseudo-classi dinamiche" definite da CSS2 ( ecco le specifiche ). Ecco un breve esempio: http://jsfiddle.net/5FLr4/ . per me funziona.

— Lee,

ah grazie mille! in realtà ho avuto un posizionamento relativo che stava spingendo il testo del bambino fuori dalla vista ... doh! >. <Apprezzo l'aiuto!

— Hartley Brody,

Apparentemente questo non funzionerà per .child :: - webkit-scrollbar-thumb se vuoi cambiare l'evidenziazione della barra di scorrimento all'interno dell'elemento figlio.

— thdoan

1

.parent:not(:hover) .child { display: none; }sembra funzionare bene per me, anche se certamente non sono preoccupato per IE6. Ma in questo modo posso usarlo su elementi che non voglio avere una displayproprietà uniforme .

— Blair Connolly,

147

Non è necessario utilizzare JavaScript o jquery, CSS è sufficiente:

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

VEDI DEMO

— Ali Adravi
fonte

9

Usa toggleClass().

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

dov'è colorla classe. Puoi modellare la classe come preferisci per ottenere il comportamento che desideri. L'esempio dimostra come la classe viene aggiunta e rimossa con il mouse dentro e fuori.

Controlla qui l' esempio di lavoro .

— hussein
fonte

7

.parent:hover > .child {
    /*do anything with this child*/
}

— Amir Rahman
fonte

3

La risposta di Stephen è corretta ma ecco il mio adattamento della sua risposta:

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');
});

Puoi vedere questo esempio lavorando su jsFiddle .

— Roger Roelofs
fonte

3

Ho quello che penso sia una soluzione migliore, dal momento che è scalabile a più livelli, quanti ne desideriamo, non solo due o tre.

Uso i bordi, ma può anche essere fatto con qualsiasi stile desiderato, come il colore di sfondo.

Con il confine, l'idea è di:

Avere un colore del bordo diverso solo un div, il div su dove si trova il mouse, non su alcun genitore, non su alcun bambino, quindi può essere visto solo tale bordo div in un colore diverso mentre il resto rimane su bianco.

Puoi provarlo su: http://jsbin.com/ubiyo3/13

Ed ecco il codice:

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

Questo non fa ciò che la domanda è stata posta. Cambia il bordo attorno all'elemento su cui si passa il mouse. Non il bordo attorno a un elemento figlio.

— jenniwren,

2

Se stai utilizzando lo stile Bootstrap di Twitter e JS di base per un menu a discesa:

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

Questo è il pezzo mancante per creare dropdown (che non sono fastidiosi)

Il comportamento è di:
1. Rimani aperto quando fai clic, chiudi quando fai clic in qualsiasi altro punto della pagina
2. Chiude automaticamente quando il mouse scorre fuori dagli elementi del menu.

— R Tobin
fonte

2

Non sono sicuro se ci sono ragioni terribili per farlo o no, ma sembra funzionare con me sull'ultima versione di Chrome / Firefox senza problemi di prestazioni visibili con molti elementi nella pagina.

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

Ma in questo modo, tutto ciò che serve è applicare parent-hover-showa un elemento e il resto è curato, e puoi mantenere qualsiasi tipo di visualizzazione predefinito che desideri senza che sia sempre "blocco" o creando più classi per ogni tipo.

— Brian Leishman
fonte

0

Per cambiarlo da CSS non è nemmeno necessario impostare la classe figlio

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

— hamboy75
fonte