jquery - Business Catalyst Web App：如何创建悬停在列表视图上的图像

Question

请参阅以下链接： http ://deerfootnew.businesscatalyst.com/_ryan

几天来，我一直在尝试创建一个事件处理程序，但没有成功。我希望最终用户将鼠标悬停在其中任何一个 Web 应用程序项上，并且图像会出现在页面中心的列表视图上。鼠标离开时图像会消失。

图像（地毯）源自网络应用程序字段 {tag_picture} 之一。该图像比您在列表视图中看到的要大，我希望出现一个灯箱以显示更大的图像。

我该怎么办？

Answer 1

请注意，在悬停时更改页面布局，或在悬停元素上显示元素，充其量是一种可怕的用户界面模式；它不适用于触摸设备，并且当悬停的元素由于布局更改而不再悬停时，通常会创建循环。

您可能会更幸运地将大图像放入 Web 应用程序列表项模板中，默认情况下隐藏，然后显示在项目旁边。也许是这样的？

基于链接页面的 HTML 片段（.df-largeimage是新的）：

<div class="deerfootCarpretTest">
    <div class="df1">Carpet </div>
    <div class="df2"><a href="/carpet_test/carpet-1"><img border="0" alt="" src="/images/test carpet-01.jpg"></a></div>
    <div class="df3"> From:     300</div>
    <div class="df-largeimage">
        <img border="0" alt="" src="/images/test carpet-01.jpg">
    </div>
</div>

CSS：

.df-largeimage {
    display: none;
    left: 230px;
    position: absolute;
}

Javascript：

jQuery(".df2").hover(
    // mouseenter
    function() {
        jQuery(this).siblings(".df-largeimage").show()
    },
    // mouseleave
    function() {
        jQuery(this).siblings(".df-largeimage").hide()
    }
);