• G
    User Attivo •

    effetto hover su intera riga (td)

    Esiste il modo di rendere una intera riga evidenziata al passaggio del mouse ... ? Utilizando il <table><tr><td></td></tr></table> ?

    Grazie

    0
  • G
    User Attivo •

    ... dopo un pò di tentativi h trovato questa formula di tags:

    <div id="main_search" style="height:300px;border:1px dotted #f33;">
<ul id="nav_result">
<li id="li_result">
<a href="index.php">
<table width="100%" height="2px" cellspacing="0">
<tr>
<td width="20%" >
<img src="./thumb/1/tessera_2009.jpg"></td>
<td width="20%">cucine</td><td width="20%">prova</td>
<td width="10%">&euro; 320</td>
</a>
</tr>
</table>
</li>
<li ...>
....
</li></ul></div>

    si IE7 và alla grande ... su firefox invece il tag <a> diventa una riga sottilissima in testa ad ogni <LI> .... ho smanettato con tutte le forme di **DISPLAY:????; **sul tag <a> ma niente !!!

    Qualche aiutino ?
    thanks

    p.s.
    le regole del css:
    #nav_result{list-style-type:none;}
    #li_result{border-bottom:1px dotted #333;
    height:100px;
    cursor:hand;}
    :hover
    {background:#E9FFD2;
    cursor:hand;}
    a
    {text-decoration:none;
    display:table-row-group;
    border:1px dotted #00CC33;}
    table
    {cursor:hand;}

    0
  • G
    User Attivo •

    ehm ... chiedo venia a tutti, era errata la chiusura del tag <a> ...

    funziona cmq per chi fosse interessato !! 😉

    0
  • G
    User Attivo •

    ... 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 :arrabbiato:

    0
  • P
    User Attivo •

    Ma se da css imposti: tr hover{background: #ffffff}?

    0
  • K
    User Newbie •

    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.

    :ciauz:

    0
  • K
    User Newbie •

    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.

    0
  • G
    User Attivo •

    @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 ... :mmm: trattandosi di una immagine interna ad un <div> posso risolvere con lo z-index ?

    thanks

    0
  • K
    User Newbie •

    Ehm... non ho capito molto, mi incolli il codice?

    0
  • G
    User Attivo •

    [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]

    0
  • K
    User Newbie •

    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.

    :ciauz:

    0
  • G
    User Attivo •

    ... 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 🙂

    0
  • K
    User Newbie •

    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>).

    0
Effettua l'accesso per rispondere