(1)我用css做了一个transition效果,鼠标hover后div的height值变大。但是会影响到页面内其他的div元素,如何改写代码才可以?如下图:
(2)如果在鼠标hover后将div的width变大,会出现里面的文字无法在新增长的块内显示,如何修改?如下图:
下面为相应的源代码:
---------html-------------
<div class="content">
<div class="paper_1"></div>
<div class="paper_1"></div>
<div class="paper_1"></div>
<div class="paper_1"></div>
<div class="paper_1">
<img src="images/cup.jpg" width="200" height="200" alt="茶杯">
<h1>茶杯</h1>
这是一个好茶杯
</div>
<div class="paper_1"></div>
<div class="paper_1"></div>
<div class="paper_1"></div>
<div class="paper_1"></div>
<div class="paper_1"></div>
<div class="paper_1"></div>
<div class="paper_1"></div>
<div class="paper_1"></div>
<div class="paper_1"></div>
<div class="paper_1"></div>
<div class="paper_1"></div>
<div class="paper_1"></div>
<div class="paper_1"></div>
<div class="paper_1"></div>
<div class="paper_1"></div>
</div>
--------css---------
.paper_1{
background-color:#FFF;
width:200px;
height:200px;
margin:5px;
border:1px solid #CCC;
box-shadow:2px 2px 2px #888888;
display:inline-block;
-webkit-transition:width 0.3s
}
.paper_1:hover{width:420px;}
关于高度固定,是把高度固定在弹出之前还是弹出之后?另hover如果不是改变高度,那应该怎么写?求教
追答不好意思 是我想太难了 以为你原来是没有的
.paper_1{
overflow:hidden;
}
.paper_1:hover{
overflow:visible;
}
高度不变一直是200 不过这个没阴影 要有阴影的 就要弹出层~ 弹层的 一会再写 或者等别给写吧
额,试了一下,把阴影去掉了,还是不行啊。。。你看一下图
有没有把之前所有特征都带上的解决方案呢?愁了我一下午了。。。。
.paper_1{
background-color:#FFF;
width:200px;
height:200px;
margin:5px;
border:1px solid #CCC;
box-shadow:2px 2px 2px #888888;
display:inline-block;
position:relative;
}
.paper_1:hover{width:420px;}
div span{
position:absolute;
top:200px;
left:0px;
z-index:9999;
width:200px;
height:200px;
box-shadow:2px 2px 2px #888888;
border-top:none;
background:#fff;
}
茶杯
这是一个好茶杯
(function(){
var alldiv = document.getElementsByTagName('div');
for(var i = 1;i
个别样式自己调 ~