Un moyen d'arrêter CSS: survoler texte-décoration souligner sur l'enfant?

Question

Possible en double:
How do I get this CSS text-decoration issue to work?

Je suis en utilisant l'effet de levier jquery pour afficher ou masquer plus d'informations sur les éléments de la liste:

jQuery(document).ready(function($) { 
    $("ul p").hide(); 
    $("ul li").addClass("link"); 
    $("ul li").click(function() { 
    $("p", this).toggle(300); 
    }); 
}); 

qui fonctionne très bien avec un structure comme:

<ul> 
<li>List element 1<p>Additional info 1</p></li> 
<li>List element 2<p>Additional info 2</p></li> 
</ul> 

Pour faire paraître « cliquable » Je suis .link de style avec CSS:

ul li.link { 
    color: #0066AA; 
} 

ul li.link:hover { 
    text-decoration: underline; 
    cursor: pointer; 
} 

Mais je ne veux pas le texte qui est révélé à ressembler à un lien si:

ul li.link p{ 
    color: black; 
    text-decoration: none; 
} 

ul li.link p:hover { 
    cursor: text; 
    text-decoration: none; 
} 

Mais le <p> est toujours souligné (en bleu) en vol stationnaire, malgré le lancement de text-decoration: none; dans chaque espace libre! D'après ce que je comprends c'est parce que les styles de l'enfant sont appliqués sur le parent, donc ce que je fais effectivement, c'est essayer de mettre «rien» au-dessus d'un soulignement et le faire disparaître. Donc ma question (éventuellement!) Est la suivante: Y at-il un moyen de se débarrasser de ce soulignement sans prendre le <p> sur le <li> (que je ne veux pas faire pour d'autres raisons)?

Answer 1

Pouvez-vous contrôler le balisage? Je voudrais envelopper le texte à l'intérieur du <li/> dans un <span/> et écrire le CSS pour cibler juste la durée avec text-decoration:underline;.

Vraiment si la zone cliquable doit être un élément <a/> avec un href de "#". Liez un gestionnaire de clic à l'ancre au lieu de li. Ensuite, vous avez plus de pseudo-sélecteurs comme: visité pour travailler avec et le comportement de cliquer dessus est documenté. Je ne suis pas sûr si p:hover est censé fonctionner en CSS. Je sais qu'il est possible de lier n'importe quel élément avec jQuery, mais avec CSS, je m'en tiens à un élément d'ancrage.