在主菜单(下拉)中的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吗?最好的解决方案是什么?

提前致谢。

最佳答案

的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 - jQuery在悬停菜单<li>项上更改<i>图片,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/26724300/

10-11 23:24
查看更多