本文介绍了使用。创建更大的副本的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我已经创建了包含图片,标题,链接和少量数据的框:
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; }
更多推荐
使用。创建更大的副本
发布评论