Question

html中，如何用css设置鼠标在div元素上悬停产生过渡效果，且不影响同级别的其他div元素？

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





Answer 1

第一个问题 必须高度固定 并且overflow设成hidden 弹出来新的层 而不能是改变高度 （要想改变高度不影响只能是绝对定位 但你这么多不可能都绝对定位吧） 第二个问题 我只能说标题<h1>标签是区块 自站一行 肯定上不去- - 改成内联 或者 浮动

追问

关于高度固定，是把高度固定在弹出之前还是弹出之后？另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
个别样式自己调 ~