Question

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)?

Answer 1

Can you control the markup? I’d wrap the text inside the <li/> in a <span/> and write the CSS to target just the span with text-decoration:underline;.

Really though the clickable area should be an <a/> element with an href of “#”. Bind a click handler to the anchor instead of the li. Then you have more pseudo-selectors like a:visited to work with and the behavior of clicking it is documented. I’m not sure if p:hover is actually supposed to work in CSS. I know it is possible to bind to any element with jQuery, but with CSS I’d stick with an anchor element.