Jeder Weg, CSS zu stoppen: Hover Text-Dekoration unterstreichen auf Kind?

Question

Mögliche Duplizieren:
How do I get this CSS text-decoration issue to work?

ich die jQuery Toggle-Effekt mit mehr Informationen über Listenelemente anzeigen oder ausblenden:

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

, die mit einem feinen arbeitet Struktur wie:

Um es anklickbare aussehen Ich bin Styling .link mit CSS:

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

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

Aber ich will nicht den Text, so wie ein Link zu sehen geoffenbart:

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

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

Aber die <p> ist immer noch unterstrichen (in blau) auf Hover, trotz Text-Dekoration werfen: keine; in jedem freien Raum! Soweit ich das verstehe, liegt das daran, dass die Kindstile auf die Eltern angewendet werden, also versuche ich, nichts auf eine Unterstreichung zu setzen und sie verschwinden zu lassen.

Also meine Frage (eventuell!) Ist dies: Gibt es eine Möglichkeit, diese Unterstreichung loszuwerden, ohne die <p> aus der <li> (die ich aus anderen Gründen nicht tun möchte) zu nehmen?

Answer 1

Können Sie das Markup kontrollieren? Ich würde den Text innerhalb der <li/> in einem <span/> verpacken und das CSS schreiben, um nur den Bereich mit text-decoration:underline; zu zielen.

Wirklich, obwohl der anklickbare Bereich ein Element mit einem href von "#" sein sollte. Binden Sie einen Click-Handler an den Anker anstelle des li. Dann haben Sie mehr Pseudo-Selektoren wie a: besucht, um zu arbeiten und das Verhalten des Klickens ist dokumentiert. Ich bin mir nicht sicher, ob p:hover eigentlich in CSS funktionieren soll. Ich weiß, dass es möglich ist, an jedes Element mit jQuery zu binden, aber mit CSS würde ich bei einem Ankerelement bleiben.