28172 sujets

CSS et mise en forme, CSS3

Bonjour,

Afin de réaliser des infobulles, je cherche à cibler la balise title inclus dans des liens; ce qui marche très bien. Seul souci, j'utilise également lightbox qui cible également les liens et du coup, mon infobulle s'affiche aussi pour la lightbox; ce que je veux éviter.

je veux que mon infobulle soit affichée dans ce cas-là :

<a href="" title="Infobulle">Mon lien qui affiche une infobulle</a> 


mais pas dans celui-là : le rel='' est la cible de la lightbox

<a href="" rel="lightbox[example]" title="Infobulle">Mon lien qui affiche une infobulle</a>


ma css qui cible uniquement les titles eux-mêmes contenus dans un paragraphe (je fais grâce des détails internes aux CSS:

p [title] { 
    position: relative;
}
p [title]:hover:after {
}


j'ai bien pensé à faire quelque chose du type

p:not(rel) [title] { 
    position: relative;
}
p:not(rel) [title]:hover:after {
}

mais çà ne marche pas.

une idée ?

Merci
heu, ce n'est pas p mais a , non ?

Et pis il semblerait y avoir des confusions avec la syntaxe.
je testerais ceci par exemple:

a:not([rel]):hover:after {content:attr(title);position:absolute;background:gray;border:solid#333;color:yellow}


++
logiquement cela devrait être [a] effectivement, mais quand c'est a qui est mis, çà ne marche pas du tout !

Par contre, avec [p] çà marche !

et je viens d'essayer la proposition avec [a] et [p] et çà ne marche pas Smiley decu
As-tu essayé de cette façon:
a[rel="lightbox"]:hover{
...
}

Modifié par LuciferX (19 Oct 2012 - 11:23)
si je passe par a Smiley rel alors je peux rendre le "title" invisble; je ne trouve pas la solution très propre mais peut-être la seule effectivement ?

a Smiley rel :hover:after{
opacity:0;
}