Problema Rollover con css

**callejon85** · 17-10-2014, 17:56

Buonasera a tutti
vorrei realizzare un rollover con css come potrei fare ?

Io sto utilizzando un foglio stile in css
con dentro gli id contenitori

e poi su html mi riporto gli id con i div

ora dovrei fare un rollover su un ipotetico pulsante home

ho due immagini è voglio che questa al passaggio del mouse cambi

ho provato a fare cosi, scrivendo nel foglio stile

codice:

a.Home {
    background-image:url(Grafica%20Sito%20web/Menu%20Tasti/Home.jpg)
    position: absolute;
    width: 103px;
    heigh: 36px;
    left: 390px;
    top: 41px;
    }
    
    a.Home:hover{
    background-image:url(Grafica%20Sito%20web/Menu%20Tasti/Home2.jpg);
    position: absolute;
    width: 103px;
    heigh: 36px;
    left: 390px;
    top: 41px;
}

e nella pagina html questo:

codice HTML:

<div class="Home" 
</div>

ma nella mia pagina non appare nulla . sicuramente sarà un errore grave il mio ma non so come risolvere
spero che mi aiuterete siccome sono agli inizi
grazie mille a tutti

**mattealex** · 17-10-2014, 19:02

fai così:

Codice PHP:


a.Home {
    background-image:url("Grafica%20Sito%20web/Menu%20Tasti/Home.jpg")
    position: absolute;
    width: 103px;
    heigh: 36px;
    left: 390px;
    top: 41px;
    }
    
    a.Home:hover{
    background-image:url("Grafica%20Sito%20web/Menu%20Tasti/Home2.jpg");
}

**callejon85** · 17-10-2014, 19:08

Nulla :-( non mi appare proprio l'immagine

**mattealex** · 17-10-2014, 19:25

ora ci faccio caso, prova a cambiare "a.Home" con "div .Home" o semplicemente ".Home"

**callejon85** · 17-10-2014, 20:23

Niente...nemmeno ora

**mattealex** · 17-10-2014, 22:03

mostra un po più di html

**mattealex** · 18-10-2014, 02:27

ci ho fatto caso adesso:
1) height ci vuole la T
2)<div class="Home"></div> va bene
l'avevi chiuso?
se ancora non ti funziona posta l'html

**callejon85** · 18-10-2014, 13:06

codice HTML:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>New Photo Play</title>
<link href="stile.css" rel="stylesheet" type="text/css">
</head>

<body>

        <div id="NewPhotoPlay_01">
        <img src="Grafica Sito web/NewPhotoPlay_01.jpg">
        </div>
        
        <div id="Pixel1">
        <img src="Grafica Sito web/Pixel1.jpg">
        </div>
        
        <div id="Pixel2">
        <img src="Grafica Sito web/Pixel2.jpg">
        </div>
        
               <div class=".Home">
            </div>
            
           <div id="Footer"> 
        <img src="Grafica Sito web/Footer.png">
        </div>

CSS

codice:

@charset "utf-8";
body {
    margin:0;
    padding:0;
    height:100%;
    background-image:url(Grafica%20Sito%20web/Background.jpg)
}

#NewPhotoPlay_01 {
    position: absolute;
    width: 397px;
    height: 115px;
    left: -7px;
    top: -1px;
    }

#Pixel1 {
    position: absolute;
    width: 969px;
    height: 41px;
    left: 390px;
    top: 0px;
    }

#Pixel2 {
    position: absolute;
    width: 969px;
    height: 38px;
    left: 390px;
    top: 76px;
}

.Home {
    background-image:url(Grafica%20Sito%20web/Menu%20Tasti/Home.jpg)
    position: absolute;
    width: 103px;
    height: 36px;
    left: 390px;
    top: 41px;
    }
    
.Home:hover{
    background-image:url(Grafica%20Sito%20web/Menu%20Tasti/Home2.jpg)
} 

#Chi siamo {
    position: absolute;
    width: 91px;
    heigh: 36px;
    left: 493px;
    top: 41px;
}

#Servizi {
    position: absolute;
    width: 71px;
    heigh: 36px;
    left: 584px;
    top: 41px;
}

#Galleria {
    position: absolute;
    width: 83px;
    heigh: 36px;
    left: 655px;
    top: 41px;
}

#Misure Libri {
    position: absolute;
    width: 122px;
    heigh: 36px;
    left: 738px;
    top: 41px;
}

#Richiedi Listino {
    position: absolute;
    width: 131px;
    heigh: 36px;
    left: 860px;
    top: 41px;
}

#Software Book {
    position: absolute;
    width: 136px;
    heigh: 36px;
    left: 991px;
    top: 41px;
}

#Contattaci {
    position: absolute;
    width: 232px;
    heigh: 36px;
    left: 1127px;
    top: 41px;
}
#Footer {
    position: absolute;
    width: 1366px;
    heigh: 130px;
    bottom: 0;
    left: 0;
    overflow: hidden;
    top: 635px;
    height: 120px;
}


/* CSS Document */

body {
}

ho notato che cmq qualsiasi cosa metta non me la visualizza.
Nel senso che se tipo nel foglio stile metto un contenitore con un image in background e poi inserisco il div all'interno della mia pagina htm non mi si visualizza non capisco il xkè

**Prill** · 18-10-2014, 14:07

Per prima cosa evita di utilizzare spazi vuoti nel nome dei file (le immagini in questo caso) rinominandoli e aggiungendo un trattino per separare le parole che compongono il nome. Poi, se crei una regola per un link, a.home, non puoi applicare la classe home a un div. Inoltre perché tanti posizionamenti assoluti? Peraltro in questi casi dovresti mettere anche uno z-index per evitare che ciò che dovrebbe essere in primo piano non finisca invece sotto gli altri contenuti risultando non visibile

**callejon85** · 18-10-2014, 14:49

Ciao Prill grazie per la risposta :-) , cmq x quanto riguarda le immagini ho appena modificato aggiungendo un trattino.per quanto riguarda la regola a.home non ho capito , come potrei fare ??? cioè io vorrei fare un effetto rollover stesso in css senza richiamare nessuno script .mi aiuteresti ? dici che è inutile inserire tutte questi posizionamenti assoluti ? grazie mille in anticipo

Discussione: Problema Rollover con css

Strumenti discussione

Ricerca discussione

Visualizza

Problema Rollover con css

Permessi di invio