Selecteur CSS pour agir sur balise parent.

Bonjour a tous,

Voila mon probleme:
imaginons un bout de code comme ca:

Code:

---

<span class="pwet"><a href="#">lien<a/></span>

---

J'aimerai ecrire un style pour que lorsque je passe la souris au dessus du lien, les bordures de la balise span apparaissent.

Code:

---

1 2 3 4

span.pwet a:hover { border: solid black thin; }

---

A l'évidence je peux pas faire cela avec ce selecteur puisque ce seront les bordures du lien que je verrai apparaître ... D'ailleur peut être n'y a t-il aucun moyen de faire cela ??

Merci pour vos réponse. :)

Salut,

Code:

---

1 2 3 4

span.pwet:hover { border: solid black thin; }

---

Mais le fait de passer hors du lien et sur le span va produire le hover !
Ce que tu souhaite peut-être éviter ?

C'est pas compatible IE6, sauf si tu utilise csshover.htc

sinon c'est faisable en javascript

Merci pour ta réponse,

En fait oui, ce que je veux faire peux etre éviter, mais c'était une question un peu plus général, je voulais savoir si il existait un moyen d'agir sur une balise parent en utilisant une pseudo class style hover ou active.

Donc dans mon cas agir sur les propriétés de la balise span alors que la class :hover est appliqué a la balise "a".

Mais a y reflechir d'un peu plus pres, en faisant que du CSS je suis pas sur que ce soit possible ... Quelqu'un à une réponse pour moi ?

Merci d'avance :roll:

Citation:

---

Envoyé par TronsoT

Donc dans mon cas agir sur les propriétés de la balise span alors que la class :hover est appliqué a la balise "a".

---

Je crois que c'est possible :)

Code:

---

1 2 3 4 5 6 7 8 9 10 11

.menu a:link, .menu a:active, .menu a:visited { display: block; color: #294067; text-decoration: none; font-weight: bold; border-width: 0px; border: 1px solid #FFFFFF; padding-top: 2px; padding-bottom: 2px;   }

---

Ce code aura pour effet d'appliquer les conditions a un lien dans un div class="menu">. Maintenant a toi de l'adapter a ton cas :) En esperant avoir comprit ton probleme :)

Elwyn, je crain que tu n'aie pas compris son problème :?

TronsoT, j'ai cherché un peu, et je crois pas prendre trop de risque
en te disant que même css3 ne propose pas de solution à ton problème.

Oups :oops: dsl alors ...

Ok, merci pour ta réponse marcha, Je ne met pas résolu tout de suite au cas où quelqu'un aurait une précision a donner.

Merci et tanpis pour moi :(

Oui, j'aimerai aussi savoir si c'est possible :-)

Si une solution en javascript t'interresse tu dis.

A ma connaissance, les sélecteurs existants sont tous descendants...

A mon avis, des selecteurs qui remontent aux parents n'existent pas. Si ca existe je veux bien savoir...

Oui marcha, je veux bien voir ta solution en javascript, merci ;)

En js ca peu donner quelquechose comme ca.

Code:

---

<span class="pwet" id="test_parent"><a href="#" onmouseover(document.getElementById('test_parent').className='pwetHover');" onmouseout(document.getElementById('test_parent').className='pwet');">lien<a/></span>

---

ensuite tu as ton css pour la class pwetHover

Code:

---

1 2 3

.pwetHover { border: solid black thin; }

---

---------------------------------------
edit: oui effectivement c'est bien className, j'ai fait le code en live sans tester et je me suis planté :aie: désolé

Ouch, masu m'est passé devant :mouarf: (mais c'est className, pas class)

Alors voici une autre solution un peu différente mais sur le même principe,
qui ne nécessite pas d'avoir une class css définie pour faire la modif (ça
n'est pas un avantage, si la class existe, utilise la solution de masu)

Par contre ici, j'exploite parentNode, ce qui permet d'obtenir une référence
sur l'élément parent du lien sans avoir à lui donner un id. Ce qui peut te
simplifier la vie si tu as bcp de liens dans des spans.

Code:

---

1 2 3 4 5 6 7 8 9 10 11

<script language='javascript' type='text/javascript'> function setBorder(element, value) { element.style.border = value; } </script> <span style='padding: 40px; background-color: blue' class='truc'> <a href='#' style='background-color: yellow' onmouseover='setBorder(this.parentNode, "3px solid red");' onmouseout='setBorder(this.parentNode, "none");'>un lien</a> </span>

---

Ok, tres bien, merci pour vos solutions, j'aime bien le parentNode.

Salut :)