怎么用css实现鼠标移上去不同样式

移上去,变宽变高,顶部出来另外一段文字,鼠标移上去是第一个图,没移上去是第二个图,求代码... 移上去,变宽变高,顶部出来另外一段文字,鼠标移上去是第一个图,没移上去是第二个图,求代码 展开
 我来答
匿名用户
2018-11-09
展开全部
<style type="text/css">

.divbox {

 margin:300px auto;

 width:250px;

 color:#fff;

}

.div01 {

 position:relative;

 width:250px;

 height:300px;

 background:#000;

 box-shadow:0px 0px 20px #c89c1f inset, 0px 0px 30px #c89c1f inset;

 border:1px solid #000;

}

.div01:hover {

 width:300px;

 height:350px;

 margin-left:-25px;

 margin-top:-25px;

}

.div01 .div02 {

 display:none;

 position:absolute;

 top:-201px;

 left:-1px;

 width:300px;

 height:200px;

 background:#000;

 box-shadow:0px 0px 20px #c89c1f inset;

 border:1px solid #000;

 border-bottom:none;

}

.div01:hover .div02 {

 display:block;

}

</style>

<body>

<div class="divbox">

 <div class="div01">

  <div>内容</div>

  <div class="div02">顶部内容</div>

 </div>

</div>

</body>

随便写了个案例,你注意看css的写法

推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

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

类别

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

说明

0/200

提交
取消

辅 助

模 式