CSS'yi durdurmak için herhangi bir yol var mı?

Question

Olası Çoğalt:
How do I get this CSS text-decoration issue to work?

Ben göstermek veya liste öğeleri hakkında daha fazla bilgi gizlemek için jquery geçiş efekti kullanıyorum: Bir ile çalışıyor

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

yapı gibi:

Amacıyla 10

o tıklanabilir 'Ben css ile şekillendirme .link olduğum görünmesi için:

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

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

Ama ben çok bir bağlantı benzemeye ortaya oluyor metni istemiyoruz:

<p> hala metin süslemesine rağmen vurgunun üzerine gelin (mavi renkte). her boş alanda! Anladığım kadarıyla, çocuk stilleri ebeveynin üzerine uygulandığından, etkili bir şekilde yaptığım şey bir alt çizginin üzerine 'hiçbir şey' koymaya çalışmak ve ortadan kaybolmaktır.

Benim sorum (sonunda!) Şudur: 'dan (başka nedenlerle yapmak istemediğim) <p>'u almadan o alt çizgiden kurtulmanın bir yolu var mı?

Answer 1

İşaretlemeyi kontrol edebilir misiniz? <li/>'un içindeki metni <span/> içine sardım ve text-decoration:underline; ile sadece açıklığı hedeflemek için CSS'yi yazdım.

Gerçekten de tıklanabilir alan, bir "#" hrefiyle bir <a/> öğesi olmalıdır. Bir tıklama işleyicisini, li yerine ankraja bağlayın. Sonra, daha çok sözde seçmenleriniz var: Birlikte çalışmak için ziyaret edildi ve tıklama davranışı belgelendi. p:hover'un aslında CSS'de çalışıp çalışması gerektiğinden emin değilim. JQuery ile herhangi bir öğeye bağlanmak mümkün olduğunu biliyorum, ancak CSS ile bir çapa elemanı ile sopa.