Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

css-javascript c'est ici ?

10 réponses
Avatar
Démosthene
Bonjour,

Je suis à la recherche d'une réponse à la frontière entre le javascript
et le css.

Dites-moi ou poster si je me trompe de forum.

Je souhaite activer un changement d'état de plusieures cases d'un
tableau au survol d'un seule

typiquement :
<td class="out" id="per_3">2</td>
<td class="out" id="per_3">1</td>
<td class="in" id="per_4">4</td>
<td class="in" id="per_4">5</td>
</tr>
<tr>
<td class="num_semaine">10</td>
<td class="in" id="per_4">6</td>
<td class="in" id="per_4">7</td>
<td class="in" id="per_4">8</td>
<td class="in" id="per_4">9</td>
<td class="in" id="per_4">10</td>
<td class="out" id="per_5">11</td>
<td class="out" id="per_5">11</td>

J'ai essayé en css :

#per_4:hover {
background-color: yellow;
}

mais n'ai pas réussi à jaunir plusieures cases.

Auriez-vous une idée ? un conseil ?

Puis-je échapper aux onmouseover dont le contenu serait ... dynamique ou
pléthorique ???

Cordialement Démosthène

10 réponses

Avatar
ASM
Bonjour,

Je suis à la recherche d'une réponse à la frontière entre le javascript
et le css.

Dites-moi ou poster si je me trompe de forum.

Je souhaite activer un changement d'état de plusieures cases d'un
tableau au survol d'un seule


bon avec du JS pour sélectionner les cellules
mais après ce sont des css qui assurent les modifs au survol
(plus béquille JS pour IE)

http://perso.wanadoo.fr/stephane.moriaux/truc/tables_highlight_cells_fr.htm

http://perso.wanadoo.fr/stephane.moriaux/truc/tables_highlight_rows_fr.htm
http://perso.wanadoo.fr/stephane.moriaux/truc/tables_highlight_rows_opera.htm

http://perso.wanadoo.fr/stephane.moriaux/truc/tables_un-sur-deux_rows_fr.htm



typiquement :
<td class="out" id="per_3">2</td>
<td class="out" id="per_3">1</td>
<td class="in" id="per_4">4</td>
<td class="in" id="per_4">5</td>
</tr>
<tr>
<td class="num_semaine">10</td>
<td class="in" id="per_4">6</td>
<td class="in" id="per_4">7</td>
<td class="in" id="per_4">8</td>
<td class="in" id="per_4">9</td>
<td class="in" id="per_4">10</td>
<td class="out" id="per_5">11</td>
<td class="out" id="per_5">11</td>

J'ai essayé en css :


il est ABSOLUMENT interdit d'avoir plusieurs fois le MEME id

#per_4:hover {
background-color: yellow;
}

mais n'ai pas réussi à jaunir plusieures cases.


table td.in { background: #ffc }
table:hover td.in { background: #ff0 }

tr { background : silver }
tr td.out { font-weight: 100}
tr:hover { background: moccasin }
tr:hover td.out { font-weight: bold; color: red; background: white }

ou

tr.semaine { background : silver }
tr.semaine td.out { font-weight: 100}
tr.semaine:hover { background: moccasin }
tr.semaine:hover td.out { font-weight: bold; color: red; background: white }


--
Stephane Moriaux et son [moins] vieux Mac

Avatar
Pascal Chevrel
Bonjour,

Je suis à la recherche d'une réponse à la frontière entre le javascript
et le css.

Dites-moi ou poster si je me trompe de forum.

Je souhaite activer un changement d'état de plusieures cases d'un
tableau au survol d'un seule

typiquement :
<td class="out" id="per_3">2</td>
<td class="out" id="per_3">1</td>
<td class="in" id="per_4">4</td>
<td class="in" id="per_4">5</td>
</tr>


Tu n'as pas le droit d'utiliser plusieurs fois le même identifiant
unique dans la page, par définition, un identifiant unique est unique.
Il faut que tu utilises une classe


J'ai essayé en css :

#per_4:hover {
background-color: yellow;
}

mais n'ai pas réussi à jaunir plusieures cases.


Tu ne peux jaunir des cases que si elles sont descendantes de la case en
survol en css, donc si ce sont des cases sans lien parent>enfant tu
devras utiliser du javascript.


Auriez-vous une idée ? un conseil ?

Puis-je échapper aux onmouseover dont le contenu serait ... dynamique ou
pléthorique ???


probablement en utilisant en javascript un événement global pour éviter
d'avoir à mettre des onmouseover partout, mais c'est plus compliqué au
niveau code, surtout parce que la méthode à utiliser pour IE est
différente que pour les autres navigateurs.

Avatar
Démosthene
http://perso.wanadoo.fr/stephane.moriaux/truc/tables_highlight_cells_fr.htm

http://perso.wanadoo.fr/stephane.moriaux/truc/tables_highlight_rows_fr.htm
http://perso.wanadoo.fr/stephane.moriaux/truc/tables_highlight_rows_opera.htm


http://perso.wanadoo.fr/stephane.moriaux/truc/tables_un-sur-deux_rows_fr.htm


merci pour les exemples, ils sont très parlant et explicites ;)
je vais m'en inspirer pour mon soucis.


<td class="in" id="per_4">8</td>
<td class="in" id="per_4">9</td>
<td class="in" id="per_4">10</td>
<td class="out" id="per_5">11</td>

J'ai essayé en css :



il est ABSOLUMENT interdit d'avoir plusieurs fois le MEME id


dans ce cas, pour ne pas multiplier les classes à l'infini, est-il
possible d'écrire quelquechose comme

<td class="out" class="per_5">11</td> ?

Cordialement Démosthène


Avatar
ASM

dans ce cas, pour ne pas multiplier les classes à l'infini, est-il
possible d'écrire quelquechose comme

<td class="out" class="per_5">11</td> ?


<td class="out per_5">
ou
<td class="out, per_5">

je sais plus mais c'est l'un des 2


à mettre dans ses boutons de la bare des favoris ou signets :
http://www.yoyodesign.org/doc/w3c/css2/indexlist.html

--
Stephane Moriaux et son [moins] vieux Mac

Avatar
Démosthene


dans ce cas, pour ne pas multiplier les classes à l'infini, est-il
possible d'écrire quelquechose comme

<td class="out" class="per_5">11</td> ?



<td class="out per_5">
ou
<td class="out, per_5">

je sais plus mais c'est l'un des 2


C'est excellent de simplicité :) je suppose que c'est lû de gauche à
droite ! est-ce strict ?

Démosthène


Avatar
ASM

<td class="out per_5">
ou
<td class="out, per_5">

je sais plus mais c'est l'un des 2


C'est excellent de simplicité :) je suppose que c'est lû de gauche à
droite !


de mes esspérimentations, aucun des 2 ne prend le pas sur l'autre
comme si l'ordre importait peu.
à vérifier

le lien donné n'en dit rien qquepart ?

est-ce strict ?


heu, pourquoi ne le serait-ce pas ?
si c'est le W3C qui donne la ficelle ...

--
Stephane Moriaux et son [moins] vieux Mac


Avatar
Laurent Vilday

<td class="out per_5">
ou
<td class="out, per_5">

je sais plus mais c'est l'un des 2


c'est la version séparée par un espace la bonne

<style type="text/css">
.rouge { color:red; }
.gras { font-weight:bold; }
</style>

<div class="gras rouge">je suis gras et rouge</div>

--
laurent

Avatar
Démosthene

de mes esspérimentations, aucun des 2 ne prend le pas sur l'autre
comme si l'ordre importait peu.
à vérifier


C'est bizzard dans ce cas il peut y avoir conflit et bug aléatoire ! ?

le lien donné n'en dit rien qquepart ?

est-ce strict ?




Je demandais si le sens de lecture etait strictement défini de gauche à
droite ...


Avatar
ASM

de mes esspérimentations, aucun des 2 ne prend le pas sur l'autre
comme si l'ordre importait peu.
à vérifier



C'est bizzard dans ce cas il peut y avoir conflit et bug aléatoire ! ?


Je conseilerais d'aller poser la question sur :
news:fr.comp.infosystemes.www.auteurs
par exemple

--
Stephane Moriaux et son [moins] vieux Mac


Avatar
Olivier Miakinen

de mes esspérimentations, aucun des 2 ne prend le pas sur l'autre
comme si l'ordre importait peu.
à vérifier


C'est bizarre dans ce cas il peut y avoir conflit et bug aléatoire ! ?


Le seul ordre qui compte est celui des définitions CSS, pas l'ordre des
mots dans l'attribut class :
http://www.yoyodesign.org/doc/w3c/css2/cascade.html#cascading-order

<cit.>
4. Un tri final selon l'ordre de spécification : si deux règles ont
les mêmes poids, origines et spécificités, c'est la dernière survenue
qui l'emporte. Les règles issues de feuilles de style importées sont
considérées comme étant survenues avant chacune de celles de la feuille
de style elle-même.
</cit.>


Donc aucun conflit ni bug aléatoire pourvu que le navigateur respecte
ces règles simples. Je me demande malgré tout si c'est le cas d'Internet
Explorer.

Je demandais si le sens de lecture etait strictement défini de gauche à
droite ...


Je dirais plutôt de haut en bas. ;-)

--
Olivier Miakinen
Troll du plus sage chez les conviviaux : le nouveau venu, avec
son clan, s'infiltre dans les groupes de nouvelles. (3 c.)