Effetto :hover sui div. è possibile?

**fcaldera** · 13-01-2007, 14:46

Originariamente inviato da ana4ever-vids
Comunque puoi provare così:
...
<a id="ciccinobello">
<div id="quelchevuoi">
</div>
</a>
...

Attenzione però che è formalmente scorretto inserire un elemento blocco (la div) all'interno di un elemento inline (il link)

personalmente utilizzo un file .htc su explorer per correggerne il comportamento. La soluzione si avvale in sostanza di uno script per cui è bene utilizzarlo solo se non compromette l'accessibilità del testo o le funzionalità della pagina.

il file .htc è scaricabile da qui
http://www.xs4all.nl/~peterned/scripts/csshover.htc

e lo includi nel tuo documento con un commento condizionale

codice:

<!--[if lt IE 7]>
<style type="text/css">
   behavior:url("csshover.htc");
</style>
<![endif]-->

**Mega69** · 13-01-2007, 16:52

Non bisogna aggiungere * o div per selezionare gli elementi?

Apparte questo potresti usare come ho detto il tag a, solo che mettere dei link dentro un link non credo sia corretto dal punto di vista della validazione...

**ana4ever-vids** · 14-01-2007, 17:00

Lo so, ma purtroppo anche IE è formalmente (e non) scorretto. Tanto vale!

**ana4ever-vids** · 14-01-2007, 17:01

Al limite usi i commenti condizionali (altra schifezza di IE) per inserire l'ancora...

**ana4ever-vids** · 14-01-2007, 17:02

Originariamente inviato da fcaldera personalmente utilizzo un file .htc su explorer per correggerne il comportamento. La soluzione si avvale in sostanza di uno script per cui è bene utilizzarlo solo se non compromette l'accessibilità del testo o le funzionalità della pagina.

Ma se js è disabilitato??

**sloth.86** · 15-01-2007, 11:54

niente da fare...
tanto vale provare ad usare javascript....

**Sickbrain** · 15-01-2007, 12:24

prova a vedere se questo ti può aiutare:

http://www.sickbrain.org/?document_i...ic_id=8&page=0

Nel tutorial e esempio ho utilizzato un'immagine, ma se vuoi usare un colore basta modificare un minimo codice per ottenerlo.

Fammi sapere!

**sloth.86** · 15-01-2007, 12:52

grazie... risolto...

fantastico...

**Ascarius** · 17-01-2007, 17:57

Salve ragazzi,
innanzi tutto mi presento in quanto nuovo del forum ma non del campo. Mi chiamo Oscar e sono uno studente di Ingegneria Robotica con il pallino (mania) dell' Informatica e di tutto cio che le riguarda. Purtroppo sloth.86 ha ragione, IE (ed in particolar modo IE6) seppur con un banale 60% è il re dei Web Browser in quanto a diffusione. E come se non bastasse non si è ancora definitivamente adattato agli standard del W3C (il che è assurdo se pensate che lo stesso Zio Bill è padre di molti degli standard della programmazione). Comunque non voglio dilungarmi in inutili chiacchiere e vengo subito al dunque.

Cio che chiedi sloth.86 (anche se credo abbia gia risolto ma per chi non ha capito come) è possibile, anche in IE ma purtroppo non con CSS, o meglio non solo con esso. Infatti bisogna necessariamente sporcare il tutto con un po di JavaScript (ma non fa poi tanto male credimi, almeno non in questo caso). Scoviamo allora il segreto di Microsoft (che ben conosce i suoi limiti) tratto dal sito di Office 2007 da te linkato dove l'effetto è applicato alle celle di una tabella <td> e non ai div (ma si può fare anche con i div).

Il Trucco

codice:

<TD class=cdchumidc 
    onmouseover="this.className='cdchumidcover'" 
    onmouseout="this.className='cdchumidc'" 
width=408>

Qualcuno ci è arrivato? Dai non è difficile?! Eh eh, Certo che ci siete arrivati ma per i beginner lo spiego ugualmente. Il tutto è molto semplice, ma per essere sicuri di capirlo proviamo a buttar giu un paio di righe di codice è ad analizzarle:

Il Codice

codice:

<html>

<head>

<title>Prova DIV Selezionabili</title>

/*Definisco le classi di visualizzazione dei div*/
<style type="text/css">
  .divout
  { background-color:#DFFFFF;
    border:1px dotted #999999;
  }
  .divover
  { background-color:#AFFFFF;
    border:1px dotted #999999;
  }
</style>

</head>

<body>


<div class="divout" onmouseover="this.className='divover'" onmouseout="this.className='divout'" style="width:auto; height:50px"></div>
<div class="divout" onmouseover="this.className='divover'" onmouseout="this.className='divout'" style="width:auto; height:50px"></div>

</body>

</html>

La soluzione è molto semplice: per mezzo del tag <style> definisco due classi CSS che implementano la struttura grafica dei miei div rispettivamente al passaggio del mouse 'divover' e alla sua fuoriuscita da esso 'divout'. Tali classi saranno identiche (o almeno riferendoci all'esempio Office 2007 ma è dato libero spazio alla fantasia) tranne che per il bolore di background, leggermente piu scuro per il 'divover'. Costruite le due classi il trucco è fatto, basterà creare un div appartenente alla classe di default 'divout' (senza mouse per intenderci) e applicare agli eventi onmouseover e onmouseout la riga di JavaScript che permette di cambiare la classe di appartenenza ovvero "this.className='nomeClasse'" ove this si riferisce all'oggetto attuale (in questo caso il div) e 'nomeClasse' sta per 'divout' in caso di onmouseout e 'divover' in caso di onmouseover (vi raccomando ai caratteri maiuscolo e minuscolo, JavaScript è sensibile ai caratteri per cui M e m nn sono la stessa cosa).

Conclusioni

Sebbene la cosa sembri un complicato marchingegno, vi garantisco che è molto flessibile e leggero ed è compatibile anche con il buon Mozilla. Inoltre è applicabile a tutti i tipi di oggetti div, table, tr, td, textarea, etc..., come sempre libero spazio alla fantasia. Provate ad esempio a cambiare div con textarea lasciando il resto inalterato... Bello vero?! Purtroppo questa è l'unica soluzione con cui anche IE non fa i capricci. Al cambio di classe di appartenenza dell'oggetto, CSS ridefinirà immediatamente la struttura grafica del medesimo in base a quanto definito nella classe associata.

Spero quindi di essere stato d'aiuto a qualc'uno e vi chiedo scusa per essermi dilungato. Per qualsiasi chiarimento o informazione non esitate a contattarmi. Se sarò libero tra studio, esami, impegni, hobby e ragazze vi risponderò con piacere. Eh eh

Ascarius

**fcaldera** · 17-01-2007, 18:17

ascarius benvenuto nel forum

onestamente la tua soluzione non mi sembra molto performante per due motivi

1) utilizzi javascript inline sporcando il codice xhtml. Se devi ottenere lo stesso effetto ad esempio su 100 righe della tabella devi scrivere esplicitamente gli eventi onmouseout e onmouseover per 100 volte... quindi è meglio gestire in modo diverso il codice javascript, ad esempio facendo iterazione sui nodi td e aggiungendo dinamicamente gli eventi all'evento onload della pagina.

2) dipendi esclusivamente da javascript in tutti i browser.
se guardi qualche post più su ho proposto di appendere un file htc (codice già pronto e incluso con 5 righe) che corregge l'errore solo su IE. Negli altri browser è sempre il CSS che si occupa di gestire l'hover.

In altre parole se javascript non è attivo la tua soluzione non funziona mai mentre la mia funziona dovunque tranne che su IE 6 e precedenti.

Ciauz

Discussione: Effetto :hover sui div. è possibile?

Strumenti discussione

Ricerca discussione

Visualizza

Soluzione Definitiva

Permessi di invio