Make an entire group of nested div's into one clickable object with jCarousel

Tried searching all over the place for this so either I'm an idiot and don't know what exactly I should be searching for or it's not answered. Being a CSS newbie, I'm going to guess the former, so I appreciated the help in advance.

Here's what I'm trying to do:

I have a jCarousel which displays a set of items. Each item is made up of a picture and some text as follows:

<li>
<div class='jcarousel_item_part_pr'>
    <div class='jcarousel_item_top_pr'></div>
    <div class='jcarousel_item_midd_pr'>
        <div class='jcarousel_item_thumb_pr'>
            <a href='http://my.url' title='Item Name>
                <img src='http://my.url/image' width='115' height='115' alt='Item Name' title='Item Name'>
            </a>
        </div>
        <div class='jcarousel_item_name_pr'>
            <span class='jcarousel_item_store_cap'>
                <a href='http://my.url' title='Item Name'>Item Name</a>
            </span>
            <span class='jcarousel_item_store_cap_p'>
                <a href='http://my.url' title='Location'>Location</a>
            </span>
            <span class='jcarousel_item_store_cap_sub_p'>$Cost</span>
        </div>
    </div>
    <div class='jcarousel_item_bottom_pr'></div>
</div>

The associated CSS is as follows:

.jcarousel_item_part_pr{ width:180px; height:190px; float:center; margin-right:13px; margin-bottom:20px;}
.jcarousel_item_part_pr a{display:block;}
.jcarousel_item_top_pr{ background:url(../images/pr_top.png) top left no-repeat; height:5px; width:180px;}
.jcarousel_item_bottom_pr{ background:url(../images/pr_bottom.png) top left no-repeat; height:5px; width:180px;}
.jcarousel_item_midd_pr{ background:url(../images/pr_midd.png) top left repeat-y; height:180px; width:180px; position:relative;}
.jcarousel_item_thumb_pr{text-align:center; position:absolut开发者_运维知识库e; left:15px; bottom:42px; top:10px; width:150px;}
.jcarousel_item_name_pr{ width:170px; height:auto; position:absolute; left:5px; bottom:1px;}
.jcarousel_item_name_pr p{ font-family:Arial, Helvetica, sans-serif; color:#ffffff; font-size:13px; font-weight:bold; text-align:center; padding:2px 0 0 0;}
.jcarousel_item_name_pr p a{ font-family:Arial, Helvetica, sans-serif; color:#ffffff; font-size:13px; font-weight:bold; text-align:center; text-decoration:none;}
.jcarousel_item_name_pr p a:hover{ color:#ffffff; text-decoration:none;}

Currently, the only clickable parts of the item are the Item Name, the Location, and the picture, as seen in the code above. I would like to make the entire jCarousel item clickable, not just those specific parts. I attempted using the "display: block;" in the CSS to treat the entire thing as a block and link from there, but was unsuccessful. I have found several resources explaining how to make a single div clickable, but nothing on how to make a group of div's into a single, clickable object.

Any and all guidance will be much appreciated. Please let me know if any additional information is needed in order to solve this issue.

Thanks in advance!

---

put an a._ around the first div and a._:hover style on the the rest of the items. I did that on the 5 thumbnails and text here: http://www.artizan.com/insworld/default.asp This way the text and image show that they are being hovered even though they are two items within one td..