Link και hover όλο το tr...HTML

[tequillaki]

Μόλις έχω ξεκινήσει να ασχολούμε με html και η απάντηση στην ερώτησή μου μπορεί να είναι πασιφανή, αλλά με την απειρία μου να μην μπορώ να την βρω. Λοιπόν, έχω ένα table και θέλω να κάνω link όλο το tr του πίνακα. Μέχρι στιγμής είναι link το κάθε κελί της σειράς.

 

Στον κώδικα έχω βάλει 2x4. Η πρώτη σειρά είναι όπως το έχω κάνει τώρα και η δεύτερη όπως θα ήθελα να είναι, μόνο που δεν είναι link.

 

Για να δείτε τον κώδικα ακριβώς πως είναι: http://jsfiddle.net/

 

HTML:

><table style="border-color:rgb(156, 0, 0); border-style:solid; border-width:1px; width:99%; border-collapse:collapse; line-height:200%">
   <!--ΠΩΣ ΕΙΝΑΙ-->
   <tr id="tabhov1" style="text-align: center;">
               <td class="tabtitle"><a href="http://www.google.com" target="_google">tex1</a></td>
               <td class="tabtitle" style="text-align: left;"><b><a href="http://www.google.com" target="_google">text2</a></b></td>
               <td class="tabtitle"><a href="http://www.google.com" target="_google">text3</a></td>
               <td><a href="http://www.google.com" target="_google">text4</a></td>
           </tr>
   
   <!--ΠΩΣ ΘΑ ΗΘΕΛΑ ΝΑ ΕΙΝΑΙ ΑΛΛΑ ΔΕΝ ΕΙΝΑΙ LINK-->
           <tr id="tabhov2" style="text-align: center;">
               <td class="tabtitle">text5</td>
               <td class="tabtitle" style="text-align: left;"><b>text6</b></td>
               <td class="tabtitle">text7</td>
               <td>text8</td>
           </tr>
</table>

 

CSS:

>#tabhov1:hover{    
   background-color:#171717;    
   color:rgb(156, 0, 0);
}

#tabhov2:hover{
   background-color:#242424;    
   color:rgb(156, 0, 0);
}

#tabhov2{
   background:#1F1F1F;
}

table tr td a {
 display: block;
 width: 100%;
 height: 100%;
}

tr a:link, a:visited{
   background-color:black;
   color:white;
   text-decoration: none;
}

tr a:hover, a:active{
   text-decoration: none;
   color:red;
}

 

Με λίγα λόγια θέλω σε όποιο κελί και αν πατάω να γίνονται κόκκινα τα γράμματα όλου του tr...

[dewn735]

Δε γίνεται αυτό που λες, έτσι όπως λες. Θα πρέπει να χρησιμοποιήσεις λίγη javascript:

 

><tr style="cursor:pointer;" onclick="javascript:window.location='http://www.google.com';"><td></td><td></td></tr>

 

 

Για να αλλάξεις και το χρώμα, παίξε με το tr:hover{} (νομίζω όμως ότι δε παίζει σε ie)

[tequillaki]

με το tr:hover{} αλλάζει το το χρώμα από τη σειρά, αλλά μόνο σε text, όχι αν είναι <a>.. Όπως στη 2η σειρά από τον κώδικά μου.

Εκτώς και αν εννοείς κάτι άλλο εσύ

[TheELF]

Κόψε τα table από τώρα που είναι νωρίς,είναι μόνο για όταν πραγματικά θέλεις να δείξεις στοιχεία σε πίνακα.

Μάθε τι είναι τα div με το οποία ωραιότατα μπορείς να ορίσεις όσες περιοχές και όπου θέλεις και η κάθε μια περιοχή να είναι ακριβώς όπως και όπου την θέλεις.

[tequillaki]

Μα πραγματικά θέλω να τα δείξω σε πινακα, απλά ήθελα να κάνω κάθε row link... :/

[dewn735]

με το tr:hover{} αλλάζει το το χρώμα από τη σειρά, αλλά μόνο σε text, όχι αν είναι <a>.. Όπως στη 2η σειρά από τον κώδικά μου.

Λογικό είναι, όλα τα href "βλέπουν" τον δικό τους κανόνα (a, a:hover). Άμα τελικά το κάνεις με το onclick, βγάλε τα href

[defacer]

Μερικές φορές τα κάνουμε πολύ δύσκολα τα πράγματα ενώ είναι πολύ απλά.

 

>tr:hover a { /* και γράψε ό,τι θες /* }

 

Δεν είναι rocket science.

 

Επίσης να σχολιάσω ότι τα CSS σου δέν είναι γραμμένα με αρκετή προσοχή. Ας πούμε αυτός εδώ ο selector

 

>tr a:hover, a:active{

 

κάνει match τα a:hover μόνο αν είναι μέσα σε tr, ενώ τα a:active οπουδήποτε κι αν βρίσκονται. Φαντάζομαι πως δεν είναι επίτηδες.