2011-06-14 26 views
0

試圖在整個地方搜索這個,所以無論我是個白癡,也不知道我究竟應該搜索什麼,或者它沒有被回答。作爲一個CSS新手,我會猜測前者,所以我提前感謝了幫助。使用jCarousel將整個嵌套div組合成一個可點擊的對象

這裏就是我想要做的事:

我有一個的jCarousel,顯示一組項目。每個項目由一個圖片和一些文字如下:

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

相關的CSS如下:

.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:absolute; 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;} 

目前,該項目的唯一的可點擊的部分是商品名稱,該位置和圖片,如上面的代碼所示。我想讓整個jCarousel項目可點擊,而不僅僅是那些特定的部分。我試圖使用「display:block」在CSS中將整個事物視爲塊並從那裏鏈接,但不成功。我發現了一些解釋如何使單個div可點擊的資源,但沒有說明如何將一組div放入單個可點擊的對象中。

任何和所有的指導將不勝感激。請讓我知道是否需要任何額外的信息來解決這個問題。

在此先感謝!

回答

0

放一個。 _圍繞第一個div和a._:在其餘項目上懸停樣式。 我在5張縮略圖和文字上做了這個:http://www.artizan.com/insworld/default.asp 這樣,文字和圖片顯示它們被徘徊,即使它們是在一個td內的兩個項目..

相關問題