Question

我创建了包含图片，标题，链接以及少量数据的框：

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

我通过增加高度来创建第二个副本item2，但没有效果。

有人可以告诉我该怎么做吗？

我在google搜索时发现了这个

$('#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

你可以使用CSS悬停来实现这个

小提琴：Example

.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;
}

使用创建更大的盒子副本

2 个答案: