Allumer le frère ainé

Bonjour,

J'ai un code du genre :

<div class="tab" >Produit 2099  &gt; <a href="#">Table d&#039;orientation</a>
<table class="ore">
...
...
</table>
</div>

avec un css pour ouvrir la table au survol, un menu déroulant.

div.tab {position: relative}
table.ore {position: absolute; left: 0; top: 1.4em; display: none}
div.tab a:hover+table {display: block}
table.ore:hover {display: block}

Mon problème est de modifier la couleur du lien au survol du tableau.
Autrement dit d'agir le frère ainé.

A ma connaissance c'est impossible en CSS à court terme.

Je suis nul en javascript, quelle serait la phrase miracle ?

Merci d'avance.

Il faut mettre le lien après la table et faire position: absolute pour le lien

<div class="container">
  <table>
    <tr>
      <td>AAAA</td>
      <td>BBBB</td>
    </tr>
    <tr>
      <td>aaaa</td>
      <td>bbbb</td>
    </tr>      
  </table>
  <div class="tab">
    <a href="#">Mon lien</a>
  </div>
</div>

.container {
  position: relative;
  background-color: #eee;
  padding-top: 2rem;
  width: 15rem;
}
.container table {
  border: 1px solid #444;
  width: 100%;
}
.container table:hover {
  cursor: pointer;
}
.container .tab {
  position: absolute;
  top: 0;
}
.container table:hover + .tab {
  background-color: green;
}
.container table:hover + .tab a {
  color: #fff;
}

https://codepen.io/bazooka07/pen/LmEoZO

Bonjour boteha_2,

Si je comprends bien ce que tu veux :
quand mon curseur passe sur le lien "Table d'orientation"
il affiche table.ore (c'est ce tu appelles "menu déroulant");
puis je déplace mon curseur sur la table.ore et tu voudrais que ton lien change de style que nous appellerons styleA.

Quand je passe mon curseur passe sur le lien "Table d'orientation" , il ne doit pas avoir le styleA?

Bonjour,

Mettre le lien en position : absolute comme suggère bazooka07 est malin.

Mais comme répète Raphaël plus on reste dans le flux et mieux cela vaut, j'hésite donc à appliquer cette solution.
Pour une fois un javascript semble mieux adapté.

aliasdmc, on va dire qu'il y a un changement de couleur au survol du lien "Table d'orientation" et je veux que cette couleur soit maintenue au survol de la table quand elle est ouverte.

div.tab a:link {color: black}
div.tab a:hover {color: red}

div.tab a:hover+table {display: block}
table.ore:hover {display: block}

// Et s'il existait un sélecteur de frère aîné

table.ore:hover < frère aîné a {color: red}

Est-ce que c'est clair ?

Dans ce cas, on fait comme dans la vraie vie avec les écrans de smartphone :
un écran qui affiche : <table>
un film transparent dessus pour faire tactile : ".screen"
https://codepen.io/bazooka07/pen/gzpBNJ
Bien penser à mettre le film au-dessus (z-index)

bonjour boteha_2,

Voila un exemple rapide avec javascript :
J'ai utilisé jquery pour aller plus vite, juste pour te montrer le concepte
https://codepen.io/Zonecss/pen/xjGorJ

#bazooka07 :
Ta solution ne semble pas fonctionner si dans la table il y a un lien ou si on veux sélectionner du texte.

#boteha_2
Mais comme répète Raphaël plus on reste dans le flux et mieux cela vaut, j'hésite donc à appliquer cette solution.
Pour une fois un javascript semble mieux adapté.

A mon avis si tu peux le faire en pure CSS, c'est mieux que le faire en javascript,
Après ..., cela reste mon avis!
Il faudrait demander l'avis de Raphaël pour ton cas.

Bonjour,

Merci de vos réponses, je vais les étudier pendant le week-end, je vous tiens au courant.

Il y a des liens dans la table.

S'il y a des liens dans la table, il faut soit rester à ma première version en CSS, soit basculer en javascript.
N.B.: JQuery n'est pas obligatoire dans le dernier cas. A remplacer document.querySelector().

Bon week-end.
Pense à profiter du soleil.

Merci de ton suivi.

La solution css me semble impossible car en position absolute je ne peux pas connaître la valeur de left.

Code actuel :

<div class="tab" >Produit 2099  &gt; <a href="#">Table d&#039;orientation</a>
<table class="ore">
...
...
</table>
</div>

Solution css

<div class="tab" >Produit 2099  &gt;
<table class="ore">
...
...
</table>
<a href="#">Table d&#039;orientation</a>
</div>

Pour aligner le lien top: 0, c'est facile.
Mais le caler à gauche dans le prolongement Produit 2099 &gt; cela me semble impossible, d'autant plus que le numéro peut être de 1 à 4 chiffres.

On pourrait ajouter encore un container mais là je trouve que la structure commence à être un peu polluée...

<div class="tab" >
<table class="ore">
...
...
</table>
<p>Produit 2099  &gt; <a href="#">Table d&#039;orientation</a></p>
</div>

p {position: absolute; top: 0; left: 0}
table:hover + p a {color: red}

Solution javascript

A mon avis ce n'est pas la peine de prendre jsquery, ni même de créer une fonction javascript.
Une simple phrase magique suffit, en admettant que j'attribue un id au lien :

<div class="tab" >Produit 2099  &gt; <a href="#" id="lien">Table d&#039;orientation</a>
<table class="ore" onmouseover="getElementById("lien").color=red;">
...
...
</table>
</div>

Je suis nul en javascript.

Pour éviter de créer un id, je me demande si un sélecteur du type :

onmouseover="document.previousSibling.color=red;"

peut fonctionner.

Je vais essayer...

Bonjour,

J'ai essayé :

<table class="ore" onmouseover="document.previousSibling.style.Color='red';">

Ne marche pas du tout...

Mais vous voyez l'idée.

Bonjour. Il y a quelque chose que je ne comprends pas : puisque `table.ore` est inclu dans l'élément parent `div.tab` il suffit alors d'agir directement sur le lien via cet élément parent qui englobe le tout non ?

.tab:hover a {color: Orange}

boteha_2 a écrit :
on va dire qu'il y a un changement de couleur au survol du lien "Table d'orientation" et je veux que cette couleur soit maintenue au survol de la table quand elle est ouverte.

Ah oui je n'ai pas vu ça... Si cette contrainte est effectivement exigée (pour moi ce n'était pas évident dans le post initial) alors ma proposition précédente n'est évidement pas valable.
Modifié par Olivier C (22 Apr 2018 - 04:50)

J'ai fait une mise à jour de mon premier codepen :
https://codepen.io/bazooka07/pen/LmEoZO

Cela résoud le problème "Produit 2099 &gt;" à largeur variable.
Avec quelques retouches cosmétiques en sus.
Modifié par bazooka07 (22 Apr 2018 - 10:33)

Bonjour,

Merci de votre suivi.

Olivier C a écrit :
Bonjour. Il y a quelque chose que je ne comprends pas : puisque `table.ore` est inclu dans l'élément parent `div.tab` il suffit alors d'agir directement sur le lien via cet élément parent qui englobe le tout non ?

.tab:hover a {color: Orange}

Cela ne résout pas le problème, tu as compris.

bazooka07 a écrit :

J'ai fait une mise à jour de mon premier codepen :
https://codepen.io/bazooka07/pen/LmEoZO

Merci, je vais voir cela.

Bonjour,

Je suis nul en javascript, je l'ai déjà dit.

j'ai bricolé un petit truc qui marche à moitié.

div.tab a:link {color:  blue}
div.tab a:hover {color:  red}

<div class="tab" >Produit 2099  &gt; <a href="#" id="lien">Table d&#039;orientation</a>
<table class="ore" onmouseover="document.getElementById('lien').style.color='red'" onmouseout="document.getElementById('lien').style.color='blue'"">
...
...
</table>
</div>

Je survole la table, le lien passe bien red.
je ne survole plus la table, le lien passe bien en blue
Mais si maintenant je survole le lien, il reste en blue alors que le css lui demande de passer en red.
La dernière déclaration javascript a pris le pas sur le css

La déclaration javascript est donc mal adaptée, peut-être faut-il passer par l'ajout d'une class.

Autre problème mais un peu moins grave, le sélecteur javascript m'oblige à affecter un id au lien.
Si le sélecteur pouvait juste pointer le frère ainé, je n'ai pas besoin d'affecter un id.
Comme je peux avoir plusieurs liens sur la page, les id de différentes valeurs doivent être créées de façon dynamique par le code php.
Si la sélection du frère aîné était possible je n'aurais plus besoin de m'occuper des id dynamiques et je pourrais plus facilement inclure le code javascript dans une fonction.

Bonjour boteha_2,

Quant tu fais le :

onmouseout="document.getElementById('lien').style.color='blue'"

tu assignes au lien un style de couleur blue ce qui revient à :

<a href="#" id="lien" style="color:blue">

Du coup ton style="color:blue" est plus fort (prend le dessus) que la Css hover qui contient color: red

Voici normalement la solution à tes problèmes, même si la solution n'est vraiment pas top!
Mais bon..., des fois il faut faire avec...

<div class="tab" >Produit 2099  &gt; <a href="#">Table d&#039;orientation</a>
<table class="ore" onmouseover="this.parentNode.querySelector('a').style.color='red'" onmouseout="this.parentNode.querySelector('a').removeAttribute('style')">
  <tr><td>cvbxcvbxcv</td></tr>
</table>
</div>

Bonjour aliasdmc,

Merci, tes petites phrases magiques fonctionnent à merveille.

Pourquoi dis-tu que ce n'est pas top ?

Parce-qu'il faudrait en faire une fonction js afin de virer les phrases magiques du code html ?

Ou parce-que tu préfères une solution 100 % css ?
Moi-aussi je mets du css partout où je peux.
Ta solution en position absolute fonctionne mais elle me pose un problème dont je n'avais pas parlé.
Si tout le contenu du DIV est en position absolute la taille du div est nulle.
Or j'ai un lien inpage qui pointe vers le DIV avec une animation sur le background du DIV.
Si la taille du DIV est nulle on ne vois plus de background ni d'animation...

aliasdmc a écrit :

Pourquoi dis-tu que ce n'est pas top ?
Parce-qu'il faudrait en faire une fonction js afin de virer les phrases magiques du code html ?
Oui c'est cela, car normalement les attribut onmouseover et onmouseout ne devraient pas être écrits en dure dans le code HTML.
Les événements doivent être assignés en javascript.

Si tu peux m'aider à transformer les phrases magiques en fonction, moi j'en suis peu capable...

aliasdmc a écrit :

Je pense que tu parles de la solution de bazooka07

Y a-t-il d'autres solutions purement css ?

En css il faudrait que la table soit avant lien de façon à ce que le survol de la table puisse agir sur le lien.
A part passer en position absolute le lien je ne vois pas comment faire.
Peut-être une flexbox mais n'est-pas une enclume pour écraser une mouche.

Sur un site de test, lien vers un exemple de page avec la table d'orientation.

Effectivement flexbox est une autre solution.
Et contrairement à ce que tu penses, elle est plus élégante.
Le seul hic est les retardataires qui sont encore à Internet Explorer. et je ne parle pas de ceux qui sont rester à IE6.
Comme il ne marche sous Linux, je ne peux pas tester mais d'après le site caniuse, il y a quelque souci.
https://www.caniuse.com/#search=flexbox

J'ai modifié le codepen en conséquence en rajoutant une class flex1 au container :
https://codepen.io/bazooka07/pen/LmEoZO

En traditionnel (relative + absolute) :

.container {
  padding-top: 2rem;
  position: relative;
}
.container .tab {
  position: absolute;
  top: 0;
}
.container .tab a {
  padding: 0.2rem 0.8rem;
  text-decoration: none;
}

avec flexbox :

.container {
  display: flex;
  flex-direction: column-reverse; 
}