css如何实现鼠标移至图片上显示遮罩层及文字
1.首先看看HTML、一个img图像控件和一个带掩码样式的div，其中包含文本。这是蒙版层。
2.然后，查看样式定义。首先，查看图像容器和图像的样式，如图所示。这主要是准备我们的绝对定位口罩。
3.看看蒙版层的样式定义。代码如图所示。
背景:rgba(0,0,0,0.7);
透明度可以通过修改后面的0.7号来改变。1是完全不透明的，0是完全透明的。
4.然后添加用于鼠标移动的脚本代码来显示蒙版层。这段js代码是用jquery编写的，既方便又简单，所以我们首先介绍jquery脚本库。
5.添加mouseover和mouseout事件，主要是当鼠标移动到图像容器上时显示蒙版层，当鼠标移出时隐藏蒙版层。
6.刷新页面，您可以看到页面上显示的正常图片。
7.当我们把鼠标放在蒙版层上时，蒙版层就会显示出来。
方法一：鼠标移至图片上显示遮罩层及文字
1、先看下html，一个img图片控件，和一个有mask样式的div，里面有文字，这个就是遮罩层。
2、然后看下样式定义，先看下图片容器和图片的样式，如图，其中要注意的是img_container样式里定义了position:relative;这个主要是为了让我们的遮罩层做绝对定位做准备的。
3、再看下遮罩层的样式定义，代码如图，其中需要注意的是他的定位样式，我们设置了absolute的绝对定位，另外还有半透明的background样式设置：
background:rgba(0,0,0,0.7);
可以通过修改后面的0.7这个数字来改变透明度。1为完全不透明，0为完全透明。
4、接着添加鼠标移动上去显示遮罩层的脚本代码。这个js代码用jquery来写，方便，简单一点，所以我们先引入jquery脚本库。
5、添加mouseover，mouseout事件，主要就是当鼠标移动到图片容器上时，显示遮罩层，移出时，隐藏遮罩层。
6、刷新页面，可以看到现在页面上是正常显示的图片。
7、当我们把鼠标放上去时，就显示了遮罩层了。
方法二：鼠标移动至图片，图片慢慢放大显示遮罩层及文字
1、创建外层div和商品图片。
2、设置其样式，这里都是一些基本简单的属性。*{}里面的margin和padding都设置为0，是因为浏览器对元素之间有默认的属性，如果不消除，将影响我们后面css部分属性的设定。
3、运行，查看效果。可以看到，图片在div的上面，并且于div一样大。
4、为图片增加，鼠标移入时就放大的动画。这里运用到的是css3的transform属性，设置动画的一种方式，也比较方便快捷。对于scale缩放属性，代码上有详细注释。
5、运行，查看动画效果。可以看到，此时的图片是以图片中心放大，而超出了div的范围。那么我们接下来解决这一问题。
6、为外层div设置overflow属性，使超出的部分全都隐藏。
7、运行，查看动画效果。可以看到当鼠标移上去时，图片慢慢放大，但大小始终不变，就是div的大小，那么此时外层的div就起到了相框的效果。
8、接下来增加遮罩和文字。注意全部都放到div里面，图片、遮罩、文字都为同级元素，外层div为它们的父元素。
9、为外层div添加作为父元素的相对定位属性。为遮罩设置样式及动画。为文字设置样式及动画。如图，部分属性有注释，并解释了动画效果。
10、运行，查看最终效果。图片逐渐变大，黑色半透明遮罩逐渐显现，文字逐渐从下方移到图片中间位置，严格来说是移动到外层div的中间位置。
<style type="text/css">
.box{
width:300px;
height:200px;
position:relative;
background:red;
cursor:pointer;
}
.box .bmbox{
width:300px;
height:30px;
background:black;
position:absolute;
bottom:0px;
left:0px;
display:none;
font:12px/30px "宋体"; color:white;
text-align:center;
}
.box:hover .bmbox{
width:300px;
height:30px;
background:black;
position:absolute;
bottom:0px;
left:0px;
display:block;
font:12px/30px "宋体"; color:white;
text-align:center;
}
</style>
</head>
<body>
<div class="box">
<div class="bmbox">文字</div>
</div>
</body>
刁琛话2003 :答：方法一：鼠标移至图片上显示遮罩层及文字 1、先看下html，一个img图片控件，和一个有mask样式的div，里面有文字，这个就是遮罩层。2、然后看下样式定义，先看下图片容器和图片的样式，如图，其中要注意的是img_container样...
刁琛话2003 :答：下载文件：实现鼠标放在图片上显示一个播放图标.zip|1、用脚本（js或jquery）实现：onmouseover的时候显示播放按钮层(div),onmouseout的时候再隐藏播放按钮层。2、用css实现：:hover 伪类在鼠标移到元素上时向此元素添加特殊的...
刁琛话2003 :答：.box {position:relative; float:left; width:240px; height:160px; margin:10px}.box .img {width:100%; height:100%; background-color:#fdd}.box .txt {display:none; position:absolute; top:160px; width:32...
刁琛话2003 :答：1、首先输入：<!DOCTYPE html> 鼠标悬停图片上显示文字 在线演示 www.divcss5.com img{border:0}/* css 注释说明：设置图片边框为0 */ body{behavior:url("csshover.htc");text-align:center;}/* css注释说明...
刁琛话2003 :答：首先我们设置这个img为不显示，，这样我们鼠标没有移动上去的时候就是不显示的，，代码是 .menu imag{display:none;} 为了实现鼠标移动上去的时候显示，，就要用到一个伪类:hover 当鼠标滑过首页...
刁琛话2003 :答：，bc都定位在A里 a容器 c图片二{display:none；} a容器:hover B图片一{display:none；} a容器:hover c图片二{display:block；} 还有很多很多方法，，，不过建议直接用JS来实现吧，，网上现成代码很多。。。
刁琛话2003 :答：通常可以使用css样式的 :hover 选择器， 如示例div1。也可以使用js来控制css样式，用js可以灵活加入其它效果(延迟显示、随机背景图)， 如示例div2。示例代码：<!DOCTYPE html>Document.d1{width: 150px;height: 150px;}...
刁琛话2003 :答：如果使用css hover 的话，只能改背景图片 如果想img的路径的话，只能用js oImg.onmouseover = function(){ this.src = 'images/new_pic.jpg'; //类似这样 }
刁琛话2003 :答：这个要用js的鼠标悬浮事件控制display:none/block;
刁琛话2003 :答：1、首先在netbenas建立一个html文件。2、引入css文件。3、html文件增加一个显示图片层。4、在1.css文件中增加代码。5、看看浏览器图片层效果。6、层里面加一个图片。7、在win10下调用自带的3d画图软件。8、在win10下...
