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

(1)我用css做了一个transition效果,鼠标hover后div的height值变大。但是会影响到页面内其他的div元素,如何改写代码才可以?如下图:(2)如果在... (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;}
展开
 我来答
司_水流年
2013-05-21
知道答主
回答量:20
采纳率:0%
帮助的人:17.9万
展开全部
第一个问题 必须高度固定 并且overflow设成hidden 弹出来新的层 而不能是改变高度 (要想改变高度不影响只能是绝对定位 但你这么多不可能都绝对定位吧) 第二个问题 我只能说标题<h1>标签是区块 自站一行 肯定上不去- - 改成内联 或者 浮动
更多追问追答
追问
关于高度固定,是把高度固定在弹出之前还是弹出之后?另hover如果不是改变高度,那应该怎么写?求教
追答
不好意思 是我想太难了 以为你原来是没有的  
.paper_1{
overflow:hidden;
}
.paper_1:hover{
overflow:visible;
}
高度不变一直是200 不过这个没阴影 要有阴影的 就要弹出层~ 弹层的 一会再写 或者等别给写吧
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式