网页当中如何做鼠标经过图片显示文字

网页当中如何做鼠标经过图片显示文字呢，相信很多初学html的比较想知道怎么做，其实也不难，简单的几句代码便搞定。

操作方法

  • 01

    打开dw软件，新建一个文档。

  • 02

    在dw当中，写入以下css样式： <style> .mengsb{width:648px;margin:0px auto ;} .jixing1 a{ position:relative;width:320px;margin:0 0px 0 0;float:left;height:232px;} .jixing1 li{width:320px;float:left;margin:2px;display:block;list-style:none;} .jixing1 li img{width:320px} .jixing1 a:hover{text-decoration:none;cursor:hand;} .jixing1 a span{display:none;cursor:hand;text-align:center;color:#FFF;line-height:36px;padding:98px 0;font-weight:bold;} .jixing1 a:hover span{width:320px;background:#000;display:block;position:absolute;bottom:0px;left:0;color:##FFF;filter:alpha(opacity=60);-moz-opacity:0.6;opacity:0.6;align:center;} </style>

  • 03

    然后在body当中加入以下图片，代码为： <body> <div class="mengsb"> <div class="jixing1"><li><a href="#"><img alt="河卵石" src="file:///C|/Users/Administrator/Desktop/20151221.jpg" /><span>物料花岗岩</span></a></li> <li><a href="#"><img alt="河卵石" src="file:///C|/Users/Administrator/Desktop/2015122101.jpg" /><span>物料花岗岩</span></a></li> </div></div> </body>

  • 04

    我们在实时视图中看下最后的效果。

  • 05

    另外我们可以改变一些参数来实现不同的效果，我们可以换不同的背景颜色。

  • 06

    我们看下更改颜色后的效果

赞 (0)

相关推荐

  • 网页版B站打开后仅显示文字如何解决

    网页版B站打开后仅显示文字如何解决

    出现网页版B站打开后仅显示文字的情况,一般有两种原因,①.网络问题:进行修复网络即可.这里着重解决第二个原因:②.浏览器安装了与B站不兼容的插件或扩展服务,例如广告屏蔽插件等.一起来看看解决方法吧.步 ...

  • 用Excel图片批注功能做鼠触图片显示

    有时候，为了制作信息量大又简洁的表格，我们需要为Excel表格的单元格添加可隐藏的图片，并且当鼠标指向单元格，就自动显示图片，移开则不显示，这个鼠触互动效果是不是很酷? 要实现Excel表格中鼠标指向 ...

  • 网页图片显示不出来的几种解决方法

    网络上丰富的图文资源极大地丰富了我们的生活，也提供了许多生动的信息。然而，许多网友在浏览网页时遇到网页图片不能显示的问题，给网络应用带来了很大的不便。造成网页图片不能显示的原因很多，现在，我们通过多种 ...

  • 网页图片显示不出来怎么办?

    网页图片显示不出来,主要有2个原因,一个是网络原因(包括我们的上网速度,以及网站所在服务器的网络速度);另外一个是我们电脑浏览器的设置问题(比如设置不当,或者遭病毒破坏等). 电脑网页图片显示不出来的 ...

  • Win7系统下浏览网页时图片显示不出来怎么办?

    Win7系统下,我们经常会使用浏览器来浏览一些站点查看图片,但近日有网友在访问一些站点的时候出现了网页图片显示不出来的情况,出现这种情况有时候是电脑网速慢,图片加载不成功导致,有时候是由于用户浏览器设 ...

  • ppt怎么制作鼠标控制图片的显示与消失的动画?

    ppt中想要给图片添加动画效果,该怎么使用鼠标控制图片的显示和消失呢?下面我们就来看看详细的教程. 一.插入图片 1.打开ppt,点击上方工具栏的插入,在下拉框里选择“图片——来自文件”,按照图片的保 ...

  • 如何解决IE浏览器网页图片显示红叉问题

    如何解决IE浏览器网页图片显示红叉问题

    IE是Windows系统自带的浏览器软件,有些用户遇到了网页图片显示红叉问题,想知道如何解决,接下来小编就给大家介绍一下具体的操作步骤.具体如下:1. 首先第一步根据下图箭头所指,找到并点击[IE浏览 ...

  • 网页部分图片显示不完全.出现红叉解决办法

    最近看到好多网页反映,在使用浏览器上网的时候,网页中的部分图片显示不出来,会出现红叉的现象,出现这种情况和我们的浏览器设置,以及电脑系统有一定的关联.下面分享下具体解决办法 方法步骤 01 打开IE浏 ...

  • 把鼠标放图片上，怎样才能显示出字？

    常常会看到把鼠标放在图片上,就会显示出文字.通常我们都认为是写上Alt标签,图片上就可以显示字了.其实不然,这都是我们对Alt属性的误读.下面,来给大家说下,图片上要显示字究竟是用什么标签呢?通过下面 ...