使用创建更大的盒子副本

我创建了包含图像，标题，链接和少量数据的框，其中包括：

小提琴示例

我想创建div盒的副本，它应该比实际大一点。 实际上我想在hover时用更大的尺寸突出显示它。

我通过增加高度但没有效果在item2类中创建了第二个副本。

谁能告诉我怎么做？

我在谷歌搜索时发现了这一点

 $('#theDiv').clone().css('-webkit-transform', 'scale(.125, .125)'); 

和

 var w = $("#thediv").width(); var clone = $('#thediv').clone().css("width", w/8); 

但我无法弄明白。

Answer 1

你正在复制ID。 ID必须在HTML中是唯一的，JavaScript只会搜索它找到的第一个ID，而不再是：

 var w = $("#thediv").width(); var clone = $('#thediv').clone().attr('id', 'newId').css("width", w/8); 

Answer 2

您可以使用CSShover来实现此目的

小提琴： 例子

 .item:hover h6 { margin-top: 20px; font-size: 14px; } .item:hover .moreBtn img { margin-top: 4px; } .item:hover .moreBtn { position: relative; font-size: 16px; margin-right: 10px; margin-top: 40px; color: red; text-shadow: 0px 1px 0px; font-family: Helvetica; font-weight:bold; text-style:italic; } .item:hover .pillBtn { -webkit-border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px; background:#7CDD97; padding: 21px 70px 21.0px 70px; color: #FFF; font-weight: bold; font-size: 20px; text-decoration: none; } .item:hover { background:#F3F3F3; height: 70px; -webkit-border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px; } .item:hover .media-object { height: 70px; width: 140px; }