Question

我一直试图让它工作几个小时，我尝试了一些在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的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图像。

Answer 1

奇怪的是，如果您删除了opacity规则，它就会修复它......不要问我原因！

.productItem h4 {
    color: black;
    font-family: sans-serif;
    font-size: 16px;
    font-style: normal;
    margin: 3px 0;
    opacity: 0.95;
    text-align: left;
}

.productItem h3, h4 {
    color: white;
    font-family: sans-serif;
    font-size: 20px;
    margin: 0;
    opacity: 0.95;
    text-align: right;
    width: 100%;
}

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

float .imageContainer无需<h4>。这导致了一种奇怪的副作用：它旁边的h4在某种程度上被拉伸（就像.imageContainer在.imageContainer之上的毯子一样）。当您将鼠标悬停在h4上时，您实际上是在:hover上空盘旋，这就是为什么您的opacity样式不会被触发的原因。

不确定为什么你首先拥有float，但你可以保留它。只需删除下面的{{1}}。

a.imageContainer {
    background-color: white;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    float: left;
    height: 165px;
    margin: 5px;
    text-indent: -9999px;
    width: 160px;
}

无法使我的内容减少标签可点击的超链接

1 个答案: