php - 如何编辑特色元素列表的悬停？

Question

我需要一个小帮助，在上面的页面中，当我将鼠标悬停在特色产品上时，元素的大小覆盖了标题“最新”，它位于特色行的正下方。我试图解决这个问题，但它似乎不起作用。

您能建议如何实现吗？我还想减小单个产品占用的区域大小(不是产品图像大小，而是它周围的边距和填充)。可以吗？

请帮助我完成。谢谢

精选 TPL 文件的代码

<?php
    $option = $this->config->get('featured_module');
    if($option && is_array($option)) {
        $option = array_shift($option);
    }
?>
<div class="box">
  <div class="box-heading"><span><?php echo $heading_title; ?></span></div>
  <div class="box-content">
    <div class="box-product product-grid">
      <?php foreach ($products as $product) { ?>
      <div>
        <?php if ($product['thumb']) { ?>
        <div class="image"><a href="<?php echo $product['href']; ?>" style="<?php echo ($option['image_height'] < 224) ? 'line-height: 224px' : ''; ?>"><img src="<?php echo $product['thumb']; ?>" alt="<?php echo $product['name']; ?>" /></a></div>
        <?php } else { ?>
        <div class="image">
            <span class="no-image" style="<?php echo ($option['image_width'] < 224) ? 'width: 224px' : 'width: '.$option['image_width'].'px'; ?>; <?php echo ($option['image_height'] < 224) ? 'line-height: 224px' : 'line-height: '.$option['image_height'].'px;'; ?>">
            <img src="image/no_image.jpg" alt="<?php echo $product['name']; ?>" /></span>
        </div>
        <?php } ?>
        <?php if ($product['price']) { ?>
        <div class="price-label">
          <?php if (!$product['special']) { ?>
          <div><span class="price-fixed"><?php echo $product['price']; ?></span></div>
          <?php } else { ?>
          <div class="special-price"><span class="price-fixed"><?php echo $product['special']; ?></span><span class="price-old"><?php echo $product['price']; ?></span></div>
          <?php } ?>
        </div>
        <?php } ?>
        <div class="name" style="width: <?php echo $option['image_width']; ?>px"><a href="<?php echo $product['href']; ?>"><?php echo $product['name']; ?></a></div>
        <?php if ($product['rating']) { ?>
        <div class="rating"><img src="catalog/view/theme/acceptus/image/icons/stars-<?php echo $product['rating']; ?>.png" alt="<?php echo $product['reviews']; ?>" /></div>
        <?php } ?>
        <?php if ($product['price']) { ?>
        <div class="price">
          <?php if (!$product['special']) { ?>
          <div><span class="price-fixed"><?php echo $product['price']; ?></span></div>
          <?php } else { ?>
          <div class="special-price"><span class="price-fixed"><?php echo $product['special']; ?></span><span class="price-old"><?php echo $product['price']; ?></span></div>
          <?php } ?>
        </div>
        <?php } ?>
        <div class="details">
        <div class="cart"><a onclick="addToCart('<?php echo $product['product_id']; ?>');"><span><?php echo $button_cart; ?></span></a></div>
        <div class="wishlist"><a onclick="addToWishList('<?php echo $product['product_id']; ?>');"><span>Add to Wish List</span></a></div>
        <div class="compare"><a onclick="addToCompare('<?php echo $product['product_id']; ?>');"><span>Add to Compare</span></a></div>
        </div>
      </div>
      <?php } ?>
    </div>
  </div>
</div>

Answer 1

我认为这会解决您的问题。给“最新”框一个 style="margin-top: 70px;"，作为内联或给一个新类并给样式。