Possible Duplicate:
How do I get this CSS text-decoration issue to work?
I'm using the jquery toggle effect to show or hide more information about list elements:
jQuery(document).ready(function($) {
$("ul p").hide();
$("ul li").addClass("link");
$("ul li").click(function () {
$("p", this).toggle(300);
});
});
which works fine with a structure like:
<ul>
<li>List element 1<p>Additional info 1</p></li>
<li>List element 2<p>Additional info 2</p></li>
</ul>
In order to make it look 'clickable' I'm styling .link with css:
ul li.link {
color: #0066AA;
}
ul li.link:hover {
text-decoration: underline;
cursor: pointer;
}
But I don't want the text that's revealed to look like a link so:
ul li.link p{
color: black;
text-decoration: none;
}
ul li.link p:hover {
cursor: text;
text-decoration: none;
}
But the <p>
is still underlined (in blue) on hover, despite throwing text-decoration:none; in every free space! From what I understand this is because the child styles are applied on top of the parent so what I'm effectively doing is trying to put 'nothing' on top of an underline and have it disappear.
So my question (eventually!) is this: Is there any way to get rid of that underline without taking the <p>
out of the <li>
(which I don't want to do for other reasons)?