Question

如何为下拉项目进行图像预览，如下面的链接。 https://www.jumeirah.com/en/hotels-resorts/dubai/burj-al-arab/?currency=AED&gclid=Cj0KEQiA25rFBRC8rfyX1vjeg7YBEiQAFIb3b_5nlK1PNwQxRSn6cEP2Y1mEwqHjzC4w5ruyEXBTTOIaAsVZ8P8HAQ&gclsrc=aw.ds&dclid=COPghJmzl9ICFa8i0wodPXkEew

如果您将鼠标悬停在菜单中的“酒店和度假村”上，则会显示一个下拉列表。然后，如果将鼠标悬停在下拉菜单上的任何项目上，我们就可以看到预览图像我怎么能做那样的事情？下拉我可以做，但问题是预览图像。提前致谢。

Answer 1

这是一个jquery函数......所有你需要做的就是：

$(document).ready(function(){
    $("#menu_item").mouseenter(function(){
        $("#pic_box").css("background-image", "url(image.jpg)");
    });
    $("#menu_item").mouseleave(function(){
        $("#pic_box").css("background-image", "url(other-image.jpg)");
    });
});

并为每个菜单项重复

下拉菜单列表，带有图像预览

1 个答案: