28172 sujets

CSS et mise en forme, CSS3

[Résolu] Problème au survol sur une table

Bonjour,

J'ai beau cherché, j'ai pas trouvé la solution en css.

Il s'agit d'un back-office. Je cible donc firefox, chrome opéra (donc css3 sans problème).

J'ai un tr qui contient un 'titre' th avec un rowspan (4 pour mon example).

Si je fait tr:hover {
background-color: green;}

quand je passe au dessus de mon th, j'ai la première ligne qui s'affiche en vert. (assez disgracieux).

Je souhaiterais que la couleur change de couleur (de la ligne entière, mes td) mais pas qu'elle change lors du survol de mon th.

J'espère que mon énoncé est assez claire.

J'ai beau chercher. Pour l'instant, j'ai pas la sol (impensable avec css3, ma solution est là mais je la trouve pas!).

Si vous avez rencontré ce problème...
Bonjour,
zabka a écrit :
J'espère que mon énoncé est assez claire.


Pas tant que ça Smiley ravi ! Pourrais-tu montrer un peu plus de code ...

Est-ce quelque chose comme ceci?
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS3</title>
    <style>
		tr:hover {	background-color: green;}
		td:hover {background-color:lime;}
    </style>
  </head><body>
	<table border="1" cellspacing="0" cellpadding="3">
		<tr><th rowspan="4">Header 1</th></tr>
		<tr><td>aaa</td><td>bbb</td><td>ccc</td><td>ddd</td></tr>
		<tr><td>aaa</td><td>bbb</td><td>ccc</td><td>ddd</td></tr>
		<tr><td>aaa</td><td>bbb</td><td>ccc</td><td>ddd</td></tr>
	</table>
  </body></html>
Non. En fait voici ma dernière version (en désordre total).


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Page</title>
<style type="text/css">
table {

width: 500px
background: yellow
}


tr:first-child:hover td {
background: maroon
}

.model-content:hover {
background: green
}

tr:hover td {
background: green
}

</style>
</head>  
<body>
    <table summary="vue de l'ensemble des générations du modèles">   
            <tr class="golf1">
                <th>Golf I</th>
                <td><a href="#">Tous modèles</a></td>
                <td class="roro">Compacte/Routière</td>
                <td>3/5 portes</td>
            </tr>
						<tbody>
            <tr class="golf3">
                <th rowspan="4">Golf III</th>
                <td class="model-content"><a href="#">Compacte</a></td>
                <td class="model-content">Compacte/routière</td>
                <td class="model-content">3/5 portes</td>
            </tr>
            <tr>
                <td class="model-content"><a href="#">Cabriolet</a></td>
                <td class="model-content">Compacte/routière</td>
                <td class="model-content">2 portes</td>
            </tr>
            <tr>
                <td class="model-content"><a href="#">Break</a></td>
                <td class="model-content">Compacte/routière</td>
                <td class="model-content">4 portes</td>
            </tr>
						
            <tr>
                <td class="model-content"><a href="#">Coupé</a></td>
                <td class="model-content">Compacte/routière</td>
                <td class="model-content">2 portes</td>                                             
            </tr>
						</tbody>
            <tr class="golf4">
                <th rowspan="4">Golf IV</th>
                <td><a href="#">Compacte</a></td>
                <td>Compacte/routière</td>
                <td>3/5 portes</td>
            </tr>
            <tr>
                <td><a href="#">Cabriolet</a></td>
                <td>Compacte/routière</td>
                <td>2 portes</td>
            </tr>
            <tr>
                <td><a href="#">Break</a></td>
                <td>Compacte/routière</td>
                <td>4 portes</td>
            </tr>
            <tr>
                <td><a href="#">Coupé</a></td>
                <td>Compacte/routière</td>
                <td>2 portes</td>                                             
            </tr>
    </table>                            
</body>
</html>



Je suis parti sur une piste à approfondir (j'essaye de sortir les th du flux pour ne pas être pris en compte avec le survol).
Ta solution semble une bonne alternative!

Es-ce correcte au niveau de l'accessibilité. Je pense, mais je ne suis pas un expert!

En tous cas, elle me convient.

J'attend un peu avant de mettre en résolu...
Administrateur
Bonjour,

veux-tu que les TH ne changent jamais de couleur de fond au survol des TD ? C'est impossible en CSS, il faut JS pour ça.

Le mieux que j'arrive à faire, c'est de recolorer les TH et TD quand "la ligne" est survolée mais également quand un TH est survolé de le recolorer lui et les TD qui suivent en autre chose (rien enfin transparent). Ca ne fonctionne que parce que TH est "au-dessus" de TR, enfin prioritaire sur lui et que les TD suivent les TH.
Par contre aller styler les TH qui précèdent les TD au survol de ces derniers ou bien le parent TR au survol d'une cellule, ça c'est impossible actuellement en CSS.
Styler un élément précédent ou un élément parent, c'est niet.
Il faut du JavaScript. Ou attendre le sélecteur parent en CSS3 level 4 c'est-à-dire pas pour tout de suite Smiley cligne

Petite démo : http://jsfiddle.net/k7btc/
table {
    width: 500px;
    background: yellow;
}
th,td {
    border: 1px solid #000;
}

tr:hover th,
tr:hover td {
    background: maroon
}
tr th:hover,
tr th:hover ~ td {
        background: gold; /* à remplacer par transparent */
}

Modifié par Felipe (08 Mar 2013 - 21:53)
J'ai l'effet que je souhaitais (marche sur chrome et firefox).

Mais au niveau du code, je ne sais pas si c'est correcte de passer comme ça?


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Page</title>
<style type="text/css">
table {
background: yellow
}

tr:hover td {
background: maroon
}

.model-content:hover {
background: green
}

tr:hover td {
background: green
}

</style>
</head>  
<body>
    <table summary="vue de l'ensemble des générations du modèles">   
            <tr>
                <th rowspan="2">Golf I</th>
							</tr>
							<tr>
                <td><a href="#">Tous modèles</a></td>
                <td class="roro">Compacte/Routière</td>
                <td>3/5 portes</td>
            </tr>
						<tbody>
            <tr>
                <th rowspan="5">Golf III</th>
						</tr>
						<tr>
                <td class="model-content"><a href="#">Compacte</a></td>
                <td class="model-content">Compacte/routière</td>
                <td class="model-content">3/5 portes</td>
            </tr>
            <tr>
                <td class="model-content"><a href="#">Cabriolet</a></td>
                <td class="model-content">Compacte/routière</td>
                <td class="model-content">2 portes</td>
            </tr>
            <tr>
                <td class="model-content"><a href="#">Break</a></td>
                <td class="model-content">Compacte/routière</td>
                <td class="model-content">4 portes</td>
            </tr>
						<tr>
                <td class="model-content"><a href="#">Coupé</a></td>
                <td class="model-content">Compacte/routière</td>
                <td class="model-content">2 portes</td>                                             
            </tr>
						</tbody>
            <tr>
                <th rowspan="5">Golf IV</th>
            </tr>
            <tr>
                <td><a href="#">Compacte</a></td>
                <td>Compacte/routière</td>
                <td>3/5 portes</td>
            </tr>
            <tr>
                <td><a href="#">Cabriolet</a></td>
                <td>Compacte/routière</td>
                <td>2 portes</td>
            </tr>
            <tr>
                <td><a href="#">Break</a></td>
                <td>Compacte/routière</td>
                <td>4 portes</td>
            </tr>
            <tr>
                <td><a href="#">Coupé</a></td>
                <td>Compacte/routière</td>
                <td>2 portes</td>                                             
            </tr>
    </table>                            
</body>
</html>


Je l'ai dit, c'est pas important vue qu'il s'agit d'un espace ou seul moi y aura accès. Mais, pour le principe, j'aurais bien aimer savoir si c'était correcte de faire comme ça?
Bon, j'ai fait comme ça! Tant pis, je ne serais pas si ce code est valide au niveau html

<tr>
    <th rowspan="5">Golf IV</th>
</tr>
<tr>
    <td><a href="#">Compacte</a></td>
    <td>Compacte/routière</td>
    <td>3/5 portes</td>
</tr>
<tr>
    <td><a href="#">Cabriolet</a></td>
    <td>Compacte/routière</td>
    <td>2 portes</td>
</tr>
<tr>
    <td><a href="#">Break</a></td>
    <td>Compacte/routière</td>
    <td>4 portes</td>
</tr>
<tr>
    <td><a href="#">Coupé</a></td>
    <td>Compacte/routière</td>
    <td>2 portes</td>                                             
</tr>
Sujet clos
Aller à