使用。创建更大的副本 [英] Creating the larger replica of box with

问题描述

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

Fiddle Example

我想创建div框的副本，实际上它应该稍大一些。

我使用 item2 创建第二个副本，可以有人告诉我如何做到这一点？

我发现这个同时googling

  $（'＃theDiv'）。clone（）。css（' -  webkit-transform'，'scale （.125，.125）'）; 
  

和

  var w = $（＃thediv）。width（）; 
 var clone = $（'＃thediv'）。clone（）。css（width，w / 8）; 
  

但我无法解决它。

解决方案

你可以使用CSS悬停到这个

小提琴：示例

  .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; 
颜色：红色; 
 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; 
背景：＃7CDD97; 
 padding：21px 70px 21.0px 70px; 
颜色：#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; 
} 
  

I have created box with image, title, link and few data which is here:

Fiddle Example

I want to create the replica of div box which should be little larger then actually. Actually I want to show it highlighted with little larger size on hover.

I create second copy in fiddle with item2 class by increased height but no effect.

can some one tell me how to do this?

I found this while googling

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

and

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

But I could not figure out with it.

解决方案

You can use CSS hover to d this

Fiddle: 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;
}

这篇关于使用。创建更大的副本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！