PROBLEMA Sfondo che cambia al passaggio del mouse

Pubblicità
Haidakan

Haidakan

Nuovo Utente
Messaggi
125
Reazioni
2
Punteggio
35
Salve, spero sia la sezione giusta.
Il mio problema sembra piuttosto banale e comune, ma cercando su internet non ho trovato nulla.
Ho creato un menù composto da tanti div i quali contengono ognuno un link ad una pagina. Il problema è che non riesco a cambiare lo sfondo, o meglio, con :hover ci sono riuscito ma lo sfondo si posiziona sopra il menu anche settandolo con z-index. Grazie in anticipo.
 
Di sicuro è un problema della struttura degli elementi html.
Puoi postare porzioni di codice per capire meglio ?
 
Ho fatto una cosa di questo tipo, molto da "ignorante" ahahImmagine.webp
In pratica mi servirebbe che il quadrato con classe "b" si posizioni sotto quello con classe "a"
 
Edita il messaggio usando il tag CODE
così posso prendere il codice ed usarlo.
 
HTML: 
<html>
    <head>
        <style type="text/css">
        
        .a {
            width: 300px;
            height: 300px;
            background: orange;
            }
        
        .b {
            width: 200px;
            height: 200px;
            background: green;
            opacity: 0.5;
            margin-top: 40px;
        }
        
        .a:hover .b{
            opacity: 1;
        }
        
        </style>
    </head>
    
        <body>
        
        
        <div class="a">
            aaaaaaaa
            <div class="b">
                bbbbbbbb
            </div>
        </div>
            
        </body>
</html>
 
Haidakan ha detto:
mi servirebbe che il quadrato con classe "b" si posizioni sotto quello con classe "a"
Clicca per espandere...
HTML: 
<html>
<head>
  <style type="text/css">
    .a {
      width: 300px;
      height: 300px;
      background: orange;
    }

    .b {
      width: 200px;
      height: 200px;
      background: green;
      opacity: 0.5;
    }

    .a:hover .b {
      opacity: 1;
    }
  </style>
</head>
<body>
  <div class="a">
    aaaaaaaa
  </div>
  <div class="b">
    bbbbbbbb
  </div>
</body>
</html>
Dipende quanto lo vuoi sotto...
 
Haidakan ha detto:
Se non sbaglio hai eliminato solo il margin-top, non penso cambi molto...
Clicca per espandere...
Non solo, i due div sono allo stesso livello e non uno dentro l'altro.
E' quella la vera modifica.

La cosa migliore era prendere tutto il mio codice e provarlo...
 
Pubblicità
Pubblicità
Indietro
Top