javascript - 创建覆盖 View 并将其渲染在主干的动态 div 中

Question

这是我的框架:

...

var showChart = new showChartView({
    el: this.$el.find("#my-chart-div");
    // Other parameters passed in to build the chart
});
showChart.render();

上面的 View 在浏览器上呈现一个图表。

上面 div 的 css 如下所示:

my-chart-div
{
    height: 100,
    width: 300
}

HTML:

<div id="my-chart-div"></div>

我想要做的是，当我将鼠标悬停在 div (my-chart-div) 上时，应该有一个以更大尺寸呈现的覆盖图表(呈现为上面相同 View 的实例 - ShowChartView 但具有更大尺寸)宽度和高度)，所以它的 css 看起来像这样:

overlay-chart-div
{
    height: 200,
    width: 500
}

有什么想法吗？

Answer 1

那么当您将鼠标悬停在图表上时，您只是想要一个稍微大一点的图表吗？

如果是这种情况，这应该非常适合您:

#my-chart-div:hover {
    transform: scale(1.1) translate(4%, 4%);
}

如果要更大，只需将scale() 增加到1.2。