[info] cambio colore sfondo al passaggio del mouse

**NoWhere** · 17-03-2008, 19.12.00

a-ah! no. non mi serve per un collegamento!!

so come usare le pseudo-classi delle ancore..

mi serve dare lo stesso effetto ad un intero DIV al passaggio del mouse.
Mi ricordo di averlo già visto, forse avevo anche una guida ma non la trovo più..
le uniche cose che ho trovato in rete sono dei tricks ma che agiscono via JS e io invece ricordavo che si poteva emulare via CSS...

quindi, esiste tale effetto da poter ricreare su un DIV al passaggio del mouse via CSS??

si? no? altrimenti come fare?

denghiu per le risposte che so già saranno tante tantissime!!

**dreadnaut** · 17-03-2008, 19.27.46

beh, :hover funziona su tutti gli elementi, soltanto IE6< lo considera solo sui tag <a>. Io consiglio di usare :hover, e se proprio vuoi infili un paio di commenti condizionali e carichi un javascript solo per IE6<, che getElementByClass()-a e aggiunge un evento onMouseOver agli elementi trovati

**NoWhere** · 17-03-2008, 19.51.51

usare :hover...
tipo così?

Codice:

.classediv {width, height, bordo, ecc.}
.classediv:hover { background-color: blue; }

e tecnicamente nel DIV con classe "classediv" se passo il mouse di sopra cambia il colore dello sfondo??

per quanto riguarda invece il js??

**dreadnaut** · 17-03-2008, 20.26.29

css: esatto

javascript: getElementByClass() ti ritorna un array con tutti gli elementi nella pagina definiti con quella classe. Cicli sull'array e setti elem.style.backgroundColor = "blue", o a quello normale. Torno a casa e poi scrivo due righe più precise se ti servono.

**NoWhere** · 18-03-2008, 02.26.19

di js non ho proprio capito ^__^''
il css invece l'ho provato su FF e non funonzia!! '_'
temo che ho bisogno di altro help!! ^ _ ^''

18-03-2008, 11.57.34

Codice HTML:

<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT TYPE="text/javascript">
<!--
function mouseover()
{
document.getElementById("thediv").style.backgroundColor='red';
}
function mouseout()
{
document.getElementById("thediv").style.backgroundColor='white';
}

//-->
</SCRIPT>

</HEAD>
<BODY>

<div style="width:200px;height:200px;border:solid thin black" id=thediv onmouseover="mouseover()" onmouseout="mouseout()">
<div>

</BODY>
</HTML>

vedi se questo ti va bene

**dementialsite** · 18-03-2008, 12.52.34

Io per fare il rollover su tutti gli elementi uso questo (nell'esempio è un DIV):

Codice HTML:

<style type="text/css">
div.out { /* ... gli stili quando sei fuori con il mouse */ }
div.over { /* ... gli stili quando sei sopra con il mouse */ }
</style>
...
<div class="out" onmouseover="this.className='over'" onmouseout="this.className='out'">
...
</div>

Stammi bene...

**NoWhere** · 18-03-2008, 16.10.52

owo, sembrano funzionare tutti e due, solo che nella soluzione postata da dementialsite, é obbligatorio settare una misura larghezza altezza per tutti e due gli stili, o direttamente nel DIV interessato!

pare quindi che devo per forza utilizzare js..

grazie dell'aiuto ragazzi!! = )

18-03-2008, 16.15.04

Oppure definisci gli attributi comuni con:

div.out, div.over {
// attributi
}

Ciaooooo!!!

**NoWhere** · 18-03-2008, 18.40.32

sto provando ad utilizzare la soluzione dementialsite ma non capisco il perchè funziona solo su 2 di 4 DIV!

ho esattamente riportato, nella pagina il codice css, personbalizzando il colore dello sfondo che mi serviva e per ogni tag DIV ho aggiunto

Codice:

class="out" onmouseover="this.className='over'" onmouseout="this.className='out'"

perchè?

piccola nota, ho provato a inseriro il codice css nel file.css ma così facendo non funziona proprio!! +_+

edit, se può essere di aiuto, questa cosa la stò testando nel mio sito personale, perch'é li che mi serve!

18-03-2008, 18.58.29

z-index per il livello nei div.

che dipenda da quello?

**dementialsite** · 18-03-2008, 19.13.17

Guarda che ho testato quel codice e funziona, vedi qui: funziona sia con il CSS nella pagina che con il CSS esterno.

Stammi bene...

18-03-2008, 19.38.11

Originalmente inviato da dementialsite

Guarda che ho testato quel codice e funziona, vedi qui: funziona sia con il CSS nella pagina che con il CSS esterno.

Stammi bene...

nessuno lo mette in dubbio anzi lo ha confermato che funziona ma quello che dice è:

sto provando ad utilizzare la soluzione dementialsite ma non capisco il perchè funziona solo su 2 di 4 DIV!

guardando sul suo sito sembra che i div che usa siano disposti su + livelli e magari sta il il suop problema nello stile dei 2 div sul livello superiore.

**dreadnaut** · 18-03-2008, 19.49.19

ripreso dagli "impegni" e dai "postumi degli impegni", ecco la soluzione finale

css + javascript per IE6 o inferiore. Niente z-index che non c'entra nulla, niente javascript sparso per la pagina, niente stili multipli e malvagi, facilmente estensibile per modificare anche altri parametri oltre allo sfondo.

Si usa aggiungendo una classe agli elementi che devono diventare dinamici, e.g.

Codice HTML:

<div class="colonna mutevole">

e definendo il css

Codice HTML:

.mutevole:hover { background-color: blue; }

e inizializzando il javascript per internet explorer

Codice PHP:


inizializzaMutevolezza("mutevole", "blue");

http://dreadnaut.altervista.org/test...javascript.php

tramite commenti condizionali, altri browser che non siano IE6< non caricherebbero neppure il frammento di javascript, se messo in un file esterno.

**NoWhere** · 19-03-2008, 03.38.10

mi sono perso! '_'

[piccola nota, il z-inex é una cosa che c'era da prima, e che fa parte della struttura del mio layout da me creato!! quindi un se tocca!! =p]

stasera son io stanchino, domani con camla vedo le novità postate da demential e da dread, le provo nella pagina e vi so dire se ho risolto o editando questo post o rispondendo se ci saranno nuovi post!!

[p.s. mistero cmq sul perchè non funziona attualmente!! O.O]

**acsocmel** · 19-03-2008, 14.47.59

hai fatto uno degli errori più comuni
mischiare css esterno e formattazione inline (che sovrascrive)
la soluzione più veloce, visto che il tuto funziona 2/4, è di togliere il background dalla formattazione inline
il codice pulito sarà:

Codice HTML:

<div style="position: absolute; top: 90px; right: 15px; z-index: 10; border: 3px solid red; width: 250px; cursor: help;" class="out" onMouseOver="this.className='over'" onMouseOut="this.className='out'">
    <p style="margin: 0 0 0 80px; font-style: italic;">"immagini in movimento. prodigio della civiltà moderna"</p>
    <p style="margin-left: 80px; margin-right: 5px; margin-bottom: 5px; text-align: justify; font-size: 8pt;">nel mio account <a href="http://youtube.com/user/FaberGray">YOUTUBE</a> invece carico online video da me girati, di concerti fra cui anche alcuni dove sono io a suonare.</p>

  </div>
  
  <div style="position: absolute; top: 65px; right: 210px; z-index: 30; border: 3px solid red; width: 140px; cursor: help;" class="out" onMouseOver="this.className='over'" onMouseOut="this.className='out'">
    <p style="margin: 0 0 0 5px; font-style: italic;">"mi piace molto la fotografia e fare foto."</p>
    <p style="margin-left: 5px; margin-right: 5px; margin-bottom: 20px; text-align: justify; font-size: 8pt;">ho un account <a href="http://www.flickr.com/photos/fabergray/">FLICKR</a> dove pubblico solo fotografie che scatto ai concerti che vado a vedere</p>
  </div>
  
  <div style="position: absolute; top: 210px; left: 230px; z-index: 20; border: 3px solid red; width: 360px; cursor: help;" class="out" onMouseOver="this.className='over'" onMouseOut="this.className='out'">

    <p style="margin: 5px 5px 0 5px;">nel mio <a href="http://weblog.fabergray.com">WEBLOG</a> invece</p>
    <p style="margin: 0 5px 5px 5px; text-align: justify;">scrivo scrivo scrivo. contenitore di parole immagini e colori. tendo più che a scrivere qualcosa a creare un concetto visivo di messaggio o simile. sì perchè si scrive anche e non solo per lasciare un messaggio.</p>
  </div>
  
  <div style="position: absolute; top: 30px; left: 140px; z-index: 40; border: 3px solid #640000; width: 250px;" class="out" onMouseOver="this.className='over'" onMouseOut="this.className='out'">
    <p style="margin: 0; font-style: italic;">Breve Biografia...</p>
    <p style="margin-left: 5px; margin-right: 5px; margin-bottom: 5px; text-align: justify;">

      <strong>F</strong>aber <strong>G</strong>ray, nome d'arte. Classe <strong>1982</strong>. Vivo e studio Discipline della Musica all'università
      di Palermo. Suono la chitarra, prevalentemente elettrica ma ho un certo debole per l'acustica.
    </p>
  </div>
  
  <div style="position: absolute; top: 130px; left: 30px; border: 3px solid red; width: 150px; cursor: help;" class="out" onMouseOver="this.className='over'" onMouseOut="this.className='out'">
    <p style="margin: 0 50px 0 5px; font-style: italic;">"suonare é la mia vita"</p>
    <p style="margin: 25px 5px 5px 5px; text-align: justify; font-size: 8pt;">utilizzo il sito <a href="http://myspace.com/fabergray">MYSPACE</a> per fare nuove conoscenze sopratutto in ambito musicale, promuovere la mia musica e seguire le date dei miei amici e gruppi preferiti</p>

  </div>

poi se hai tempo togli tutti gli stili inline e li richiami dal css esterno
hai del codice in eccesso nel tuo html basterebbero degli p con classe e id
che contengano degli span
:)

**NoWhere** · 19-03-2008, 21.13.32

il css inline é provvisorio!!
mumble.. rivedo un pò che forse il vero cavillo era la doppia dichiarazione del background-color.....

edit, ho sistemato il css:
BRAVO acsocmel!

sei stato attento a trovare l'errore!
era la ripetizione del background-color in 2 DIV che impediva il funzionamento!!

credo che posso affermare, caso risolto!!

GRAZIE a tutti coloro che hano seguito e hanno aiutato questo povero ragazzo in difficoltà, me!! ^___^'

Discussione: [info] cambio colore sfondo al passaggio del mouse

LinkBack

Strumenti discussione

Display

[info] cambio colore sfondo al passaggio del mouse

Regole di scrittura