probleblemi con le transition

**napster87** · 17-01-2017, 10:40

Salve a tutti, sto cercando di usare le transizioni css, ma non riescoad effettuare ciï¿½ che voglio. Il codice scritto ï¿½ il seguente:
PAGINA HTML

codice HTML:

<div id="box-cd">
        <div id="primo">Sono il primo figlio</div>
</div>

CODICE CSS

codice:

#box-cd {
    width: 32%;
    height: 350px;
    border: solid 3px;
    position: relative;
    float: left;
    margin-right: 15px;
    margin-left: 3px;
    background-color: blue;
}
#primo {
    position: absolute;
    height: 100px;
    background-color: yellow;
    top: 350px;
    visibility: hidden;
    float: left;
    border: solid 3px;
    margin-left: -3px;
}
#box-cd:hover > #primo {
    background-color: red;
    height: 100%;
    width: 1227px;
    visibility: visible;
    transition-property: background-color, height, width, visibility;
    /*standard*/
    
    transition-duration: 2s, 2s, 4s, 2s;
    -webkit-transition-property: background-color, height, width, visibility;
    /*Safari e Chrome */
    
    -webkit-transition-duration: 2s, 2s, 4s, 2s;
    -o-transition-property: background-color, height, width, visibility;
    /*Opera*/
    
    -o-transition-duration: 2s, 2s, 4s, 2s;
    -moz-transition-property: background-color, height, width, visibility;
    /*Firefox*/
    
    -moz-transition-duration: 2s, 2s, 4s, 2s;
    transition-delay: 0s, 0s, 2s, 0s;
}
#primo:hover {
    background-color: red;
    height: 100%;
    width: 1227px;
    visibility: visible;
}

Il box "primo" ( figlio di box-cd) compare al passaggio del mouse su box-cd e questo mi va bene. Il problema riguarda la larghezza, perchï¿½ vorrei che "primo" occupasse tutta la pagina in orizzontale, ma impostando anche una width:100% questa ovviamente si riferisce al box contenitore che occupa solo il 32%.
Se primo non lo rendessi figlio di box-cd, non so come applicare la regola che al passaggio del mouse su box-cd deve verificarsi l'effetto su "primo", regola che al momento ï¿½ attiva con il selettore figlio ( >) ovvero #box-cd:hover > #primo, ho provato anche il selettore fratello #box-cd:hover + #primo e ovviamento spostando i div uno di seguito all'altro nell'html ma non funge.
Sapete aiutarmi?

**napster87** · 18-01-2017, 19:22

Per meglio far comprendere la situazione mostro la seguente immagine:
FORUM.PNG
In cui il box primo per effetto della transizione comparirà al passaggio del mouse su boc-cd.
Resta il problema della larghezza che si ferma a quella del box-contenitore(box-cd) e non riesce ad allargarsi per tutta la pagina.

**KillerWorm** · 21-01-2017, 15:36

Ciao, è possibile fare in vari modi.

Io farei una cosa del genere:

codice:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta charset="utf-8">
    <style type="text/css">
      body{ margin: 0; }
      
      .box-cd-container{
        width: 100%;
        overflow: auto;
      }
      
      .box-cd-cover{
        width: calc( 100% / 3 - 10px );
        height: 350px;
        float: left;
        background: #4471c4;
        border: 1px solid #335392;
        box-sizing: border-box;
      }
      
      .box-cd-cover:not(:first-child){
        margin-left: 15px;
      }
      
      .box-cd-details{
        visibility: hidden;
        opacity: 0;
        position: absolute;
        height: 100px;
        top: 350px;
        left: 0;
        right: 0;
        background: #ffc000;
        border: 1px solid #be8f00;
        box-sizing: border-box;

        transition: visibility 0s linear 0.5s, opacity 0.5s linear;
      }

     .box-cd-cover:hover+.box-cd-details,
     .box-cd-details:hover{
        visibility: visible;
        opacity: 1;
        
        transition-delay: 0s;
      }
    </style>
  </head>
  <body>
    <div class="box-cd-container">
      <div class="box-cd-cover"><img src="img1.png" alt="copertina 1"></div>
        <div class="box-cd-details">contenuto 1</div>
      <div class="box-cd-cover"><img src="img2.png" alt="copertina 2"></div>
        <div class="box-cd-details">contenuto 2</div>
      <div class="box-cd-cover"><img src="img3.png" alt="copertina 3"></div>
        <div class="box-cd-details">contenuto 3</div>
    </div>
    <div style="background: grey">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi venenatis nibh sit amet mi elementum semper. 
      Quisque suscipit sem non est eleifend consectetur. Suspendisse malesuada massa lorem, id pharetra arcu iaculis a. 
      Aliquam in dolor vitae purus interdum vulputate vel ac augue. Nulla congue vehicula purus eget scelerisque. 
      Nullam suscipit metus id sem eleifend, ut molestie eros dictum. Curabitur faucibus urna nec ullamcorper pharetra. 
      Nunc eget lacus at arcu scelerisque gravida ut non lectus. Donec sit amet felis in justo hendrerit ornare eu sed risus. 
      Fusce suscipit, eros id cursus suscipit, urna orci ullamcorper velit, sed ultricies mauris enim sed quam. 
      Sed nibh ante, tempor ac eleifend non, sodales a massa. Phasellus ornare elementum semper. 
      Maecenas ullamcorper libero ex, eleifend porttitor lacus convallis a.
    </div>
  </body>
</html>

[Mod]
Quando posti del codice sul forum è opportuno utilizzare gli appositi tag di formattazione. Vedi regolamento di sezione (discussione in evidenza). Grazie.

**napster87** · 22-01-2017, 10:25

Ti ringrazio per la risposta e ti faccio i complimenti perchè mi hai dato tanti spunti di riflessione, a partire dal modo in cui hai impostato la larghezza dei box-cd-cover e della proprietà box-sizing: border-box che sinceramente non conoscevo.
La cosa che mi resta ostica da assimilare e il modo incui si combinano i selettori per esempio il pseudo elemento hover.
L'altra riga di codice che non ho capito è dove utilizzi:

codice:

.box-cd-cover:not(:first-child)

Cosa significa?
Grazie mille per la disponibilità.

**napster87** · 22-01-2017, 18:10

Continuando ad analizzare il codice, ho fatto una riflessione, ma non so se è sbagliata: tra tutti i possibili selettori combinatori di fratellanza (+,~,>) honotatoche si procede dall'alto verso il basso ma non è possibile fare il viceversa ovvero tornando al codice scritto da te ho apportato le seguenti modifiche:
HTML

codice:

<div class="box-cd-container">
              <div class="box-cd-cover"><img src="img1.png" alt="copertina 1"></div>
              <div class="box-cd-details">contenuto 1</div>
              <div class="box-cd-cover2"><img src="img2.png" alt="copertina 2"></div>
                <div class="box-cd-details2">contenuto 2</div>
              <div class="box-cd-cover3"><img src="img3.png" alt="copertina 3"></div>
                <div class="box-cd-details3">contenuto 3</div>
            </div>

CSS Solo le regole che mi interessano:

codice:

.box-cd-cover:hover~.box-cd-cover2,
              .box-cd-cover:hover~.box-cd-cover3
             {
                opacity: 0.5;
                
                transition-delay: 0s;
              }

 .box-cd-cover2:hover~.box-cd-cover,
              .box-cd-cover2:hover~.box-cd-cover3
             {
                opacity: 0.5;
                
                transition-delay: 0s;
              }

La prima regola funziona bene ed il ~ individua bene i successivi 2 fratelli opacizzandoli.
La seconda regola invece opacizza solo il terzo e non il primo.
Sbaglio qualcosa oppure èunlimite dei CSS?
dovrei ottenere che all'hover sul secondo si opacizzano primo e terzo e all'hover sul terzosi opacizzano primo e secondo.

**KillerWorm** · 22-01-2017, 21:40

Ti ringrazio per la risposta e ti faccio i complimenti perchè mi hai dato tanti spunti di riflessione, a partire dal modo in cui hai impostato la larghezza dei box-cd-cover e della proprietà box-sizing: border-box che sinceramente non conoscevo.
La cosa che mi resta ostica da assimilare e il modo incui si combinano i selettori per esempio il pseudo elemento hover.

Non c'è di che. Se intendi approfondire lo studio posso consigliarti di dare uno sguardo tra i link utili (discussione in evidenza), dove puoi trovare molti riferimenti a guide, manuali e altre risorse interessanti.

L'altra riga di codice che non ho capito è dove utilizzi:
codice:
.box-cd-cover:not(:first-child)

Il selettore :not() esclude qualcosa. In questo caso ho escluso il primo elemento figlio.
Di fatto viene attribuito un margine sinistro ai vari elementi .box-cd-cover, tranne che al primo, perché in questo caso mi interessava inserire uno spazio (margine) solo tra un elemento è l'altro escludendo quindi eventuali margini più esterni.

Questo è un sistema ma chiaramente, come già indicato, si può risolvere in vari modi.

honotatoche si procede dall'alto verso il basso ma non è possibile fare il viceversa ovvero tornando al codice scritto da te ho apportato le seguenti modifiche:...

Sbaglio qualcosa oppure èunlimite dei CSS?

Sì, è un limite. Più precisamente è una caratteristica peculiare dei CSS. Per questo motivo si chiamano "Cascading Style Sheets" (fogli di stile a cascata). Non è possibile andare a ritroso nella cascata. In alcuni casi è possibile superare questi "limiti" studiando al meglio una soluzione css o usando particolari stratagemmi. Là dove non sia possibile superare questi limiti col solo css, solitamente si ricorre all'uso di JavaScript.

Ad ogni modo bisognerebbe capire quale sia il risultato che vorresti ottenere.

**napster87** · 23-01-2017, 11:02

Perfetto, studierò con attenzione i link che mi hai dato. Per quanto riguarda l'effetto era una mia curiosità ma non di importanza vitale per il progetto che sto realizzando. Approfitto della tua disponibilità per farti un' ultima domanda, premettendo che ho cercato di seguire la regola di cercare tra discussioni aperte link ecc...
All'interno della mia pagina html , poichè molte delle proprietà che ho utilizzato non sono compatibili con IE, devo in base al browser dell'utente scegliere se visualizzare il contenuto con modalità con animazioni oppure in modalità semplice con explorer.
le difficoltà sono sostanzialmente 2:
- per l'individuazione del browser ho provato con javascript e php, il codice funziona bene, anche se non so perchè se lo apro con firefox oppure con explorer l'output del codice mi da sempre firefox, lo stesso codice provato su un altro computer funziona invece.
- l'attuale struttura del codice è sequenziale, cè prima il contenitore con animazioni e poi gli stessi contenuti sono scritti senza animazioni in un box sotto.Ho provato a trasformare la pagina in php ed alternare i linguaggi piu o meno cosi:

codice:

<?php if(NomeBrowser=="FireFox"){?>
     <div >CONTENUTO1</div>
<? }else{ ?>
<div >CONTENUTO2</div>
<?} ?>

ma tutto quelloche scrivo nel body in php sembra non funzionare.
La pagina.php si trova sul webserver.

**KillerWorm** · 24-01-2017, 23:59

poichè molte delle proprietà che ho utilizzato non sono compatibili con IE

Bisognerebbe capire nel dettaglio quali proprietà stai usando e quale/i versione/i di IE stai considerando.
Ad ogni modo, in genere, si può risolvere sempre da CSS studiando il codice in modo che siano impostati dei cosiddetti fallback, evitando quindi l'uso di browser sniffing aggiuntivo.

per l'individuazione del browser ho provato con javascript e php,

[Mod]
In questo caso non ho ben capito la situazione e non vorrei sembrarti scortese ma ritengo che l'argomento di quest'ultima domanda non sia inerente con l'oggetto in discussione e che non riguardi più il CSS.
La regola generale è "una discussione => un argomento". Ti invito quindi ad aprire eventualmente una nuova discussione e formulare al meglio la tua nuova richiesta. Se pensi, inoltre, sia un problema legato a JavaScript, piuttosto che a PHP, è opportuno rivolgere la richiesta sul relativo forum, Javascript o PHP che sia. Grazie.

Buon proseguimento

Discussione: probleblemi con le transition

Strumenti discussione

Ricerca discussione

Visualizza

probleblemi con le transition

immagine

Permessi di invio