jQuery 在悬停菜单 <li> 项目上更改 <i> 图像

Question

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

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

这是某个<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>