CSS实现一个效果,当鼠标移上去时,下方出现一张图

也就是QQ空间的主页当鼠标放到主页时候下面会出现一些东西当做是图片吧。用CSS做哦暂时还没学JS的求助大神... 也就是QQ空间的主页
当鼠标放到主页时候 下面会出现一些东西 当做是图片吧。用CSS做哦 暂时还没学JS的 求助大神
展开
 我来答
刺友互
高粉答主

2019-06-19 · 每个回答都超有意思的
知道答主
回答量:3979
采纳率:100%
帮助的人:63.7万
展开全部

1、首先在netbenas建立一个html文件。

2、引入css文件。

3、html文件增加一个显示图片层。

4、在1.css文件中增加代码。

5、看看浏览器图片层效果。

6、层里面加一个图片。

7、在win10下调用自带的3d画图软件。

8、在win10下画图3d软件新建一个画布,画一个画布是184x149尺寸。

9、win10自带的3d软件画一个矩形。

10、导出png文件格式

11、在netbeanshtml代码中增加绑带div。

百度网友0c2357e
2013-11-30 · TA获得超过371个赞
知道小有建树答主
回答量:803
采纳率:50%
帮助的人:580万
展开全部
.div1:hover img{
    display:block; 

.div1 img{
    display:none; 
}
<div class="div1">
    <div >这里是测试文字</div>
    <img src="图片路径"  />
</div>

纯css的话,会用到:hover 伪类

把上面的css和html代码,放到你页面里试试

已赞过 已踩过<
你对这个回答的评价是?
评论 收起
匿名用户
推荐于2017-10-04
展开全部

在首页这个容器的里面再建一个容器比如img标签。

首先我们设置这个img为不显示,,这样我们鼠标没有移动上去的时候就是不显示的,,代码是

.menu imag{display:none;}

为了实现鼠标移动上去的时候显示,,就要用到一个伪类:hover

当鼠标滑过首页(menu)的时候img显示出来,代码就是

.menu:hover img{display:block;}

原则上到这一步的时候就完成了,但是一般来说需要把图片显示到这个首页的下方,那么还需要对这个img进行定位,一般采用position: absolute来定位,,然后相对.menu进行适当的偏移

完整的代码实例

.menu {
position:relative;
}
.menu img{display:none;}
.menu:hover img{
display:block;
position: absolute;
position: absolute; left: 0px; top: 21px;
}
html 代码例子如下
<div class="menu">首页<img src="xxx.jpg"/></div>
本回答被提问者采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 1条折叠回答
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

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

类别

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

说明

0/200

提交
取消

辅 助

模 式