Un modo per fermare il CSS: alza il puntatore del testo sulla decorazione del testo del bambino?

Question

Eventuali duplicati:
How do I get this CSS text-decoration issue to work?

che sto utilizzando l'effetto jQuery ginocchiera per mostrare o nascondere ulteriori informazioni su elementi della lista:

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

che funziona bene con un struttura del tipo:

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

Al fine di far sembrare 'cliccabile' Sono styling .link con i CSS:

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

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

Ma io non voglio il testo che ha rivelato per assomigliare ad un collegamento in modo:

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

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

Ma lo <p> è ancora sottolineato (in blu) al passaggio del mouse, nonostante la decorazione del testo di lancio: nessuna; in ogni spazio libero! Da quello che ho capito, questo è dovuto al fatto che gli stili figli sono applicati sopra il genitore, quindi quello che sto facendo in modo efficace è cercare di mettere "nulla" sopra una sottolineatura e farlo scomparire.

Quindi la mia domanda (alla fine!) È questa: c'è un modo per sbarazzarsi di quella sottolineatura senza prendere il <p> dal <li> (che non voglio fare per altri motivi)?

Answer 1

È possibile controllare il markup? Inserisco il testo all'interno dello <li/> in un <span/> e scrivo il CSS per scegliere come target solo lo span con text-decoration:underline;.

Anche se l'area cliccabile dovrebbe essere un elemento <a/> con un href di "#". Collega un gestore di clic all'ancora anziché al li. Quindi hai più pseudo-selettori come:: visitato con cui lavorare e il comportamento di fare clic su di esso è documentato. Non sono sicuro che lo p:hover debba funzionare in CSS. So che è possibile associare a qualsiasi elemento con jQuery, ma con i CSS rimango con un elemento di ancoraggio.