0

我一直在努力让它工作几个小时，我尝试了在 stackoverflow 上提供的几个解决方案，但仍然无法管理我的内容，而不是工作的标签。

这是我的html代码

<div class="productItem">
                <a class="imageContainer" style="background-image: url('<?php echo base_url() ?>images/product/thumbs/<?php echo $aProduct->filename ?>')">
                  Product Image
                </a>      
                <h4>
                    <a href="<?php echo site_url('home/product/' . $aProduct->product_id) ?>">
                        <?php echo $aProduct->product_name ?>
                    </a>
                </h4>
                <h3 class="productPrice"><?php echo $aProduct->price ?></h3>
                <span class="productItemRating">5</span>
                <a href="<?php echo $aProduct->product_id ?>" class="product-more">Buy</a>
            </div>

问题在于第一个标签，标签没有内容。我将图像作为背景而不是图像标签 bcz 有人建议它更快

imageContainer a 标签的 CSS -

a.imageContainer{    
    display:block; 
    background-image: url('../images/product/thumbs/1358600020ca3.jpg');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    margin: 5px;
    background-color: white;
    float: left;
    width: 160px;
    text-indent:-9999px; 
    height: 165px;    
}

a.imageContainer:hover{    
    cursor: pointer;
}

它应该根据其他答案工作，我想我错过了一些东西，所以我别无选择，只能问。

活生生的例子——

http://www.safaapps.com/home/category/7

您将无法单击项目 Galaxy Y 图像。

4

1 回答 1

1

奇怪的是，如果您删除opacity规则，它会修复它...不要问我为什么！

.productItem h4 {
    颜色：黑色;
    字体系列：无衬线；
    字体大小：16px；
    字体样式：正常；
    边距：3px 0；
    不透明度：0.95；
    文本对齐：左；
}

.productItem h3, h4 {
    白颜色;
    字体系列：无衬线；
    字体大小：20px；
    边距：0；
    不透明度：0.95；
    文本对齐：右；
    宽度：100%；
}

上述解决方案有效......但没有任何意义。然而，这更有意义：

没有必要float。.imageContainer这导致了一个奇怪的副作用：<h4>不知何故，旁边的它被拉伸在它上面（就像h4是在上面的毯子一样.imageContainer）。当您将鼠标悬停在 上时.imageContainer，您实际上是在悬停在 上h4，这就是您的:hover样式不会被触发的原因。

不知道为什么你首先拥有opacity它，但你可以保留它。只需删除float以下内容。

a.imageContainer {
    背景颜色：白色；
    背景位置：中心中心；
    背景重复：不重复；
    背景尺寸：包含；
    显示：块；
    向左飘浮;
    高度：165px；
    边距：5px；
    文本缩进：-9999px；
    宽度：160px；
}
于 2013-02-11T06:57:43.227 回答