Prestashop header 添加 icons/links 不可点击

Question

我需要一些有关 header 图标的帮助。我在logo附近添加了图标，我想把它们做成link，但是它们不是working.I 可以点击logo，但我不能点击它们。这是代码的一部分： <a id="header_logo" href="{$base_dir}" title="{$shop_name|escape:'htmlall':'UTF-8'}"> <img class="logo" style="margin-bottom:10px;" src="https://www.irankiuparduotuve.lt/img/irankiu-parduotuve.png" alt="{$shop_name|escape:'htmlall':'UTF-8'}" /> </a> <a href="https://www.irankiuparduotuve.lt/info/kaip-pirkti/#4"> <img style="margin-bottom:10px; position: absolute; top: 13%; left: 23%;" src="https://www.irankiuparduotuve.lt/img/saugu.png" alt="Saugu pirkti!" /> </a> <a href="https://www.irankiuparduotuve.lt/info/kaip-pirkti/#7"> <img style="margin-bottom:10px; position: absolute; top: 13%; left: 31%;" src="https://www.irankiuparduotuve.lt/img/pristatymas.png" alt="Pristatymas visoje Lietuvoje!" /> </a>

这是网站上的样子

Answer 1

这可能是 CSS 规则写得不好造成的。您的徽标使用 position:absolute; 定位，这是造成所有麻烦的原因。锚元素<a>是静态定位的，同时里面的图片是position:absolute;。因此，锚元素没有任何高度或宽度，无法点击。

您可以编辑锚点和图片标签的 CSS 规则：

<a href="https://www.irankiuparduotuve.lt/info/kaip-pirkti/#7" style="
  z-index: 11; margin-bottom: 10px;
  position: absolute; top: 13%;
  left: 31%; display: inline-block;"> 

<img style="/* margin-bottom:10px; */ /* position: absolute; */
  /* top: 13%; */ /* left: 31%; */
  /* display: inline-block; */" 
src="https://www.irankiuparduotuve.lt/img/pristatymas.png">

</a>

抱歉格式不正确。基本上你需要将你的 positionin 规则应用到 <a> 元素，而不是 <img>

Sėkmės!

Prestashop header 添加 icons/links 不可点击

Prestashop header add icons/links not clickable

header

prestashop

prestashop-1.5