jQuery 更改悬停菜单 项上的 图像

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>