Question

在主菜单中的my site（下拉列表）我有一些链接分为列。菜单由Magento管理员控制。我对HTML结构无能为力。但我可以将CSS类添加到<li>元素，我可以将图像附加到<li>属性中的<i>。

当您悬停菜单项时，我想交换/更改主图像（在第三列中）。

这是某个<li>元素（菜单项）的结构：

<li class="imageLink ">
  <a title="Babyboek" href="http://belmondo-dev01.e-sites.nl/babyboek.html" target="_self">
    <i class="">
      <img src="http://belmondo-dev01.e-sites.nl/media//menupro/Image-1415003994.png">
    </i>
    <‌span>Babyboek</span>
  </a>
</li>

是否有可能使用jQuery？什么是最好的解决方案？

提前致谢。

Answer 1

<强> HTML

<li class="imageLink" data-thumb="http://placehold.it/70x70/456.png">
     <a title="Collegaboek" href="http://belmondo-dev01.e-sites.nl/collegaboek.html" target="_self">
      <i>
       <img style="display:none" src="http://placehold.it/120/00ff55.png" />
      </i>
       <span>Collegaboek</span>
     </a>
</li>

以下是脚本，这是 Working Fiddle

<script>
    $(function () {
        $(document).on("mouseover",".imageLink",function () {
            var imgSrc = $('img', this).attr('src');

            $(this).closest(".parent")
                    .find(".imageChangeDefault")
                    .html(imgSrc ? $('<img />', { src: imgSrc }) : '');

    });
</script>

jQuery在悬停菜单<li> items </li> </i>上更改<i>图像

1 个答案: