在主菜单(下拉)中的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/