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

1、首先在netbenas建立一个html文件。2、引入css文件。3、html文件增加一个显示图片层。4、在1.css文件中增加代码。5、看看浏览器图片层效果。6、层里面加一个图片。7、在win10下调用自带的3d画图软件。8、在win10下画图3d软件新建一个画布,画一个画布是184x149尺寸。9、win10自带的3d软件画一个...
CSS实现一个效果,当鼠标移上去时,下方出现一张图
在首页这个容器的里面再建一个容器比如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>2019-03-27
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。

2019-06-19
.div1:hover img{ display:block; } .div1 img{ display:none; }<div class="div1"> <div >这里是测试文字</div> <img src="图片路径" /></div>纯css的话,会用到:hover 伪类
把上面的css和html代码,放到你页面里试试
2013-11-30
mengvlog 阅读 9 次 更新于 2025-07-20 07:54:16 我来答关注问题0
  •  信必鑫服务平台 CSS实现一个效果,当鼠标移上去时,下方出现一张图

    1、首先在netbenas建立一个html文件。2、引入css文件。3、html文件增加一个显示图片层。4、在1.css文件中增加代码。5、看看浏览器图片层效果。6、层里面加一个图片。7、在win10下调用自带的3d画图软件。8、在win10下画图3d软件新建一个画布,画一个画布是184x149尺寸。9、win10自带的3d软件画一个...

  • button:hover{color:red;/*当鼠标悬停时,字体颜色变为红色*/}保存并预览index.html文件,你会看到一个带有黑色字体的默认按钮。当你将鼠标移动到按钮上时,字体颜色会变为红色,这样就实现了鼠标移上去后字体颜色的变化效果。注意,这只是一个基础示例,你可以根据需要调整颜色、字体大小、字体类型等其...

  •  SoSoIT 如何在css中实现鼠标移上去显示文字?

    1、在页面中写好html元素和标签文字;把他设置为影藏状态,或者设置透明度为 0;.class{display: none;}//方法一 .class{opacity: 0;}//方法二 2、鼠标移上去的时候;主要是:hover状态,.class:hover{display: block;} .class{opacity: 1;} 两种方法都可以实现;还有第三种方法;不过要复杂点...

  •  校企律说法 CSS DIV 怎么做出来鼠标移动上就显示其内容?

    利用CSS的伪类hover功能,可以轻松实现当鼠标悬停在元素上时显示额外内容的效果。首先,创建一个HTML文件,并在body标签内添加一个div标签。接下来,在这个div标签内嵌套一个p标签,并在p标签内部加入需要显示的文字内容。为了便于演示,可以给这个div设置固定宽度和高度,并添加背景颜色,使其更易于识别。此...

  •  heart丁云飞 css能不能实现这种特效,就是鼠标放上去就往上移动了一点。挪走就回复原来的效果。怎么做啊!

    方法有很多种,下面我介绍一种纯CSS的实现的方式:html,body {margin: 0;padding: 0;}.main {width: 460px;/*每个box的宽度为150px,间隔为5*2*/margin: 0 auto;}.demo {float: left;display: inline-block;}.box {height: 150px;width: 150px;background: #3695d5;...

檬味博客在线解答立即免费咨询

CSS相关话题

Copyright © 2023 WWW.MENGVLOG.COM - 檬味博客
返回顶部