悬停缩放颜色属性prestashop 1.7

Question

当鼠标悬停时如何在没有模块的情况下放大属性的颜色？ 没关系

借助css / js

我的代码php：

 <ul id="group_{$id_attribute_group}" class="clearfix li_fl">
  {foreach from=$group.attributes key=id_attribute item=group_attribute}
    <li class="input-container" title="{$group_attribute.name}">
      <input class="input-color" type="radio" data-product-attribute="{$id_attribute_group}" name="group[{$id_attribute_group}]" value="{$id_attribute}"{if $group_attribute.selected} checked="checked"{/if}/>
      <span class="color {if $group_attribute.texture}texture{/if}"
        {if $group_attribute.html_color_code} style="background-color: {$group_attribute.html_color_code}" {/if}
        {if $group_attribute.texture} style="background-image: url({$group_attribute.texture})" {/if}
      ><span class="sr-only">{$group_attribute.name}</span></span>
      <span class="st-input-loading"><i class="fto-spin5 animate-spin"></i></span>
    </li>
  {/foreach}
</ul>

我的css代码如下：

.color {
    background-size: contain;
    width: 1.25rem;
    height: 1.25rem
}

.product-variants .color {
    width: 1.875rem;
    height: 1.875rem
}

.product-variants .color.texture {
    width: 2.5rem;
    height: 2.5rem
}
.product-variants .color.texture {
    width: 25px;
    height: 25px;
    border: 2px solid #FFF;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, .75);
    -moz-box-shadow: 0 0 5px 0 rgba(0, 0, 0, .75);
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, .75)
}