Cela peut-il fonctionner en CSS?

Je veux avoir des styles hover sur un lien, mais pas sur un span qui est un enfant de ce lien. Je ne l'ai jamais fait avant, mais j'ai essayé ceCela peut-il fonctionner en CSS?

.properties #content table th a { 
    color: #fff; 
    text-decoration: none; 
} 

.properties #content table th a:hover { 
    text-decoration: underline; 
} 

.properties #content table th a:hover span.sort-direction { 
    text-decoration: none; 
}

Le soulignement de vol stationnaire fonctionne très bien, mais il souligne encore la portée. Je suppose que c'est parce qu'un soulignement de l'élément d'ancrage va s'étirer pour s'adapter à la portée, je pense.

Qu'est-ce qu'une solution de contournement? Je veux que la durée soit aussi un lien. Peut-être une combinaison de position: relative sur l'ancre et position: absolute sur l'envergure?

Source

2010-02-19 alex

Puisqu'un HTML valide ne peut pas avoir 2 éléments avec le même ID, vous pouvez rendre vos sélecteurs plus efficaces en supprimant le '.properties 'dans tous les cas, juste un conseil :) –

Le CSS semble correct. Pouvez-vous pointer vers une page de test? –

J'ai utilisé les propriétés en tant que classe de mon élément de corps pour cibler différentes pages. – alex

Je mets le noeud d'ancrage dans sa propre plage, puis définissez le text-decoration: underline dessus.

.properties #content table th a:hover span.header { 
    text-decoration: underline; 
}

Source

2010-02-19 00:18:51 alex

Puisque vous n'avez pas fourni tout HTML, je fait un exemple simplifié:

CSS

.properties a { 
color: #fff; 
text-decoration: none; 
} 

.properties a:hover span.hovered { 
text-decoration: underline; 
}

HTML

<div class="properties"> 
<a href="#"><span class="hovered">Hello</span> Test</a> 
</div>

Source

2010-02-19 00:51:44 Mottie

oh oups, je vois que vous avez répondu à votre propre question ... Je suppose que j'aurais dû faire attention – Mottie

Désolé, je pensais que le HTML était explicite. Mais ça aide toujours à voir et à ne pas avoir à faire des suppositions, je l'admets. – alex

LOL Je vais admettre, je pensais que vous étiez en train d'ajouter plus de CSS à votre question et de ne pas fournir de réponse, donc je ne l'ai pas regardé tout de suite. – Mottie

C'est une bizarrerie intéressante. Étant donné que la largeur de l'élément a inclut le span, le trait de soulignement traverse le lien a. Une valeur de soulignement de none ne "vide" pas ce soulignement. Vous pouvez obtenir l'effet que vous voulez de cette façon (en supposant l'arrière-plan est blanc):

.properties #content table th a:hover { 
    border-bottom: 1px solid black; 
} 

.properties #content table th a:hover span.sort-direction { 
    border-bottom: 1px solid white; 
}

Si vous avez un fond non solide cela peut ne pas regarder idéal. Il vaudrait peut-être mieux ajouter un élément supplémentaire span.

Source

2010-02-19 00:52:57 ghoppe

Cela peut-il fonctionner en CSS?

Répondre

Questions connexes