jQuery Forum

I am having a problem with a function I am trying to write. I can't change the CSS on the second list item because it's telling me that "css is not a function."

I am trying to make it so that when you hover over one of the list item points, it will show the copy related to that item in a separate box.

Here is a sample code:

HTML

1. <ol class="poster-list" id="poster-list">
2.       <li class="pt-1">1</li>
3.       <li class="pt-2">2</li>
4.       <li class="pt-3">3</li>
5. </ol>
6. <ol class="pt-copy" id="pt-copy">
7.       <li class="pt-copy-1"><b>Treeless Parking Lots</b></li>
8.       <li class="pt-copy-2"><b>Treeless Streets</b></li>
9.       <li class="pt-copy-3"><b>Asphalt Playgrounds</b></li>
10. </ol>

JavaScript/jQuery

1. $(function(){
2.       $("#poster-list li").hover(function(){
3.             var ptX = $(".poster-list li").index($(this));      //Find the index of this list item.
4.             $(".pt-copy").css("display","block");      //Shows the containing UL
5.             var ptCopyX = $("#pt-copy li")[ptX];      //Uses index to find matching list item in second list.
6.             alert(ptCopyX);      //Results in "[object HTMLLIElement]"; innerHTML shows the element matches.
7.             ptCopyX.css("display","block");      //Error: "ptCopyX.css is not a function."
8.       });
9. });

I feel like the solution will be really obvious, but I'm stuck.