Question

试着到处寻找这个，所以要么我是个白痴，要么不知道到底应该搜索什么，或者没有回答。作为一个CSS新手，我会猜测前者，所以我提前感谢你的帮助。

这是我正在尝试做的事情：

我有一个显示一组项目的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组成一个可单击的对象。

非常感谢任何和所有指导。如果需要任何其他信息以解决此问题，请与我们联系。

提前致谢！

Answer 1

在第一个div周围放置一个。 _，在其余项目上放置一个._ ：悬停样式。我在5个缩略图和文字上做到了这一点：http://www.artizan.com/insworld/default.asp 通过这种方式，文本和图像显示它们正在盘旋，即使它们是一个td中的两个项目。

使用jCarousel将一组嵌套的div放入一个可单击的对象中

1 个答案: