28173 sujets

CSS et mise en forme, CSS3

Hover sur A pour changer css de B

bjr à tous, sous ce titre un peu abscon se cache une impasse.

Voici la situation : 2 listes à puces contenant respectivement 3 et 4 lignes/entrées.

liste 1 :
- element 1.1
- element 1.2
- element 1.3

liste 2 :
- element 2.1
- element 2.2
- element 2.3
- element 2.4

le résultat que je cherche est : passer avec la souris sur l'element 2.1 ou 2.2 et changer le style css de l'element 1.1.

Après avoir écumé le net et les bouquins que je possède traitant du css, je suis toujours sans réponse.

est-ce une colle insolvable ou les arcanes du css contiennent-elles des réponses que le petit scarabée que je suis n'a pas trouvé ?
christian57 a écrit :
Après avoir écumé le net et les bouquins que je possède traitant du css, je suis toujours sans réponse.

C'est normal, CSS s'occupe de la mise en forme, pas des interactions et des comportements. Pour ces derniers, on passera par Javascript.

S'il s'agit de changer le style de A lors du survol de B, il faut une fonction Javascript qui se déclenche lors du survol de B et qui attribue un style (ou tout simplement une classe...) à A. Si on passe par une classe, on pourra utiliser CSS pour définir précisément les changements de style voulus.
bon allez, j'ai trouvé un truc qui fonctionne partout, pour ceux que ça intéresse.
attention, ce code n'est pas optimisé mais a juste le mérite de fonctionner.

dans le header :
<script type="text/JavaScript">
function changeCouleur1(nom_id) {
document.getElementById(nom_id).style.backgroundColor = "#FF0099";
}
function changeCouleur0(nom_id) {
document.getElementById(nom_id).style.backgroundColor = "";
}
</script>

dans la balise de l'element survolé concerné, ici une puce:
<li onMouseOver="changeCouleur1('id_du_2nd_element')" onMouseOut="changeCouleur0('id_du_2nd_element')" >

=> rien de bien compliqué mais c'est toujours utile.
Bien sûr il y a moyen de faire bcp plus propre et utile mais je n'ai pas assez de temps pour le pondre.

a bientôt.
Sujet clos
Aller à