html 当鼠标停留在图片上 显示另外一个div

当鼠标停留在这张图片时显示一个透明的div里面有文字信息不用js要求只能htmlcss... 当鼠标停留在这张图片时 显示一个透明的div 里面有文字信息 不用js 要求只能html css 展开
 我来答
小星读公文
2018-11-11 · TA获得超过579个赞
知道小有建树答主
回答量:742
采纳率:89%
帮助的人:235万
展开全部
那个透明的盒子是单独写的,写好后,使用绝对定位将其移到图片盒子区域外(比如说left:9999px;),图片要求使用overflow:hidden;,这样刚开始的时候就看不见文字,
然后给图片添加hover伪类,改成你需要定位的值,鼠标移上去显示出来,,要慢慢下滑出来或者其他动态出来,使用css的过渡效果就行了
开花的树图文设计
2019-06-15 · TA获得超过884个赞
知道小有建树答主
回答量:2016
采纳率:74%
帮助的人:289万
展开全部
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {box-sizing: border-box;margin: 0;padding: 0} 
.box, .aa img{width: 250px;height: 350px;overflow: hidden;}  /*范围之外不可见*/
.text { 
    background: rgba(0,0,0,.5);
    padding: 10px;
    color:#fff;
    font-size: 20px;
    position: relative;
    margin-top: 0;     /*text默认处于aa盒子下面,所以不可见*/
    transition: .5s}   /*transition为过渡动画效果,时间0.5秒*/ 
.box:hover .text {margin-top: -72px}   /*鼠标经过box, 则text逐渐上移到aa范围内*/

.text span {font-size: 16px;color: #655c5c}
.text img {width: 100%}
</style>
</head>

<body>
<div class="box">
    <div class="aa">
        <img src="http://www.nanningsn.com/uploadfiles/adver/pro-07.jpg">
    </div>
    
    <div class="text">
        <p>我是隐藏的DIV标题</p> <span>我也是隐藏的内容介绍</span>
    </div>
</div>
</body>
</html>

采纳吧,好用的话给个赞,也希望和大家一起讨论私聊,

本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 1条折叠回答
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

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

类别

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

说明

0/200

提交
取消

辅 助

模 式