不能让我的内容减少一个标签可点击的超链接

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有人认为它是更快

的CSS为imageContainer标签 -

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。

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