Question

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

也就是QQ空间的主页
当鼠标放到主页时候 下面会出现一些东西 当做是图片吧。用CSS做哦 暂时还没学JS的 求助大神

Answer 1

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。

Answer 2

.div1:hover img{
    display:block; 
} 
.div1 img{
    display:none; 
}

<div class="div1">
    <div >这里是测试文字</div>
    <img src="图片路径"  />
</div>

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

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

Answer 3

在首页这个容器的里面再建一个容器比如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>