- Home
- Categorie
- Coding e Sistemistica
- HTML e CSS
- effetto hover su intera riga (td)
-
ehm ... chiedo venia a tutti, era errata la chiusura del tag <a> ...
funziona cmq per chi fosse interessato !!
-
... ho parlato troppo presto su firefox tutto ok su IE7 anche se clicco l'href non me lo esegue ...
questa è la struttura
<div>
<ul>
<li>
<a>
<table><tr><td></td></tr></table>
</a>
</li>
</ul>
</div>ho provato a mettere lo z-index del tag <a> a 10 ma niente
-
Ma se da css imposti: tr hover{background: #ffffff}?
-
Non c'è bisgono di usare una tabella. Basta che dichiari il tag a come elemento di blocco (display:block), e poi lo trasformi in "riga" dandogli larghezza e un po' di padding intorno al testo. Poi l'effetto hover basta che lo assegni ad a:hover.
-
Non c'è bisgono di usare una tabella. Basta che dichiari il tag a come elemento di blocco (display:block), e poi lo trasformi in "riga" dandogli larghezza e un po' di padding intorno al testo. Poi l'effetto hover basta che lo assegni ad a:hover.
-
@kontrasto said:
Non c'è bisgono di usare una tabella. Basta che dichiari il tag a come elemento di blocco (display:block), e poi lo trasformi in "riga" dandogli larghezza e un po' di padding intorno al testo. Poi l'effetto hover basta che lo assegni ad a:hover.
A grazie bell notizia mi hai dato io nel frattempo aevo risolto sostituendo il <table> con una serie di <div> annidati tutti floattanti a left
cmq avendo una <img> a inizio riga.
Ora è tutto cliccabile tranne la <img> inziale ... trattandosi di una immagine interna ad un <div> posso risolvere con lo z-index ?thanks
-
Ehm... non ho capito molto, mi incolli il codice?
-
[html]<div id="main_search" style="height:auto;">
<ul id="nav_result">
<li id="li_result">
<a href="pagina.htm">
<div style="width:100%;border:0px dotted #f33;cursor:hand;"><div id="div_task_photo">
<img src="./my_inc/annunci/thumb/1/tessera_fiv_2009.jpg" width="100px">
</div>
<div id="div_task_categoria">cucine</div>
<div id="div_task_descr">prova...</div>
<div id="div_task_marca"></div>
<div id="div_task_prezzo">€ 3200.00</div></div>
</a>
</li>
</ul>
</div>
[/html]
-
Scusa se mi permetto ma è un gran casino sto codice
Io inizialmente non mi ero accorto che avessi più di un elemento nella riga. Nell'<a> non ci può mettere tutta 'sta roba, mica è un distributore di caramelle :). L'effetto hover lo puoi ancora avere, ma che tutta la riga (che poi non è più una riga visto che hai tolto le tabelle) sia linkabile, no.
Dovresti scegliere quale degli elementi vuoi far funzionare come link, o magari puoi fare ogni elemento come link ma li devi mettere tutti in <a> diversi.
Se mi spieghi meglio come vuoi che sia il risultato finale (senza parlare di codice) provo ad aiutarti.
-
... certo che te lo spiego ci mancherebbe
Io sostanzialmente ricavo da una query dei risultati, che vorrei mostrare un rigo sotto l'altro, dove ogni rigo a sua volta dovrà contenere una immagine sulla sinistra e a seguire sei valori .... tutta la riga chiaramente la vorrei cliccabile.
I (div) del mio codice sono tutti float:left e con width & height impostate così da non far andare a capo il contenuto di un singola riga !!
grazie
-
Ciao,
non puoi fare in modo che tutta la riga sia cliccabile. Devi scegliere uno degli elementi all'interno della riga (magari l'immagine) e fare in modo che cliccando quell'elemento linki alla pagina che vuoi far aprire.
Invece puoi mantenere l'effetto hover su tutta la riga, applicando nei CSS l'effetto li:hover (però su IE6 non funzionerebbe perchè supporta le pseudo classi solo per gli <a>).