网页当中如何做鼠标经过图片显示文字
的有关信息介绍如下:网页当中如何做鼠标经过图片显示文字呢,相信很多初学html的比较想知道怎么做,其实也不难,简单的几句代码便搞定。
打开dw软件,新建一个文档。
在dw当中,写入以下css样式:
.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;}
然后在body当中加入以下图片,代码为:
我们在实时视图中看下最后的效果。
另外我们可以改变一些参数来实现不同的效果,我们可以换不同的背景颜色。
我们看下更改颜色后的效果