css如何实现鼠标移至图片上显示遮罩层及文字
方法一：鼠标移至图片上显示遮罩层及文字
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的中间位置。
查泼具2562 :答：很简单，你虽然写了2个样式，但你的表格本身没有调用.pp的样式，还有里面必须含有标签，因为样式中已经定义了，为防止图片重复，可以去除标签，改成文字即可。如果要每个单元格模块不同背景的话，可以再定义几个背景图片样式，然后给td调用。所有代码如下，已帮你修改测试成功：index_05_01.pp td a{ ...
查泼具2562 :答：img:hover{ /*hover事件，当鼠标移动到图片时触发*/ position: relative;top: 20px;right:10px;}
查泼具2562 :答：).style.display="none";} div代码： 遮罩层 这个是我做的遮罩层的，和你的需求类似，可以稍作修改，实现你的效果，希望可以帮到你！
查泼具2562 :答：2、在装修市场申请设计师权限 [JS变换图片的图片代码]当鼠标没有指在上面时，显示的是图片1，当鼠标滑过时，会自动变成图片2。 但是这个代码在淘宝拓展店铺 实现不了。[CSS]鼠标不放时显示1.jpg，鼠标滑过显示2.jpg，纯CSS实现是这样的： ChangeImg { width:200px; height:200px; background:url(...
查泼具2562 :答：1、首先在netbenas建立一个html文件。2、引入css文件。3、html文件增加一个显示图片层。4、在1.css文件中增加代码。5、看看浏览器图片层效果。6、层里面加一个图片。7、在win10下调用自带的3d画图软件。8、在win10下画图3d软件新建一个画布,画一个画布是184x149尺寸。9、win10自带的3d软件画一个...
查泼具2562 :答：这个是用jq做的 (document).ready(function(){$('.nav .menu_list').hover(function(){$('#sub_01').css('display','block');},function(){$('#sub_01').css('display','none');});/***/});这个是jq方法，原理就是鼠标经过一个层，用hover()方法，然后另外一个层显示，经过之后...
查泼具2562 :答：这样就可以了！不用javascript!* {margin:0;padding:0;list-style:none;}#shopnav {}#shopnav li {width:200px;position:relative;}#shopnav li div {display:none;}#shopnav li:hover div {display:block;width:200px;position:absolute;top:0;right:-205px;}<!--还望采纳，因为我想了...
查泼具2562 :答：下面是我举的一个例子，如果需要和目标网站完全一样，需要扒QQ的页面了 如果需要，我给你扒一个。不过扒的东西是死的。你想设计出你喜欢的页面就要自己看代码了。跟随鼠标的小星星 ===1、将以下代码加入到HEML的之间：<STYLE TYPE="text/css"> <!-- BODY{ overflow:scroll;overflow-x:hidden;...
查泼具2562 :答：图片是背景图，使用background-position来设置背景定位，:hover来控制显示
查泼具2562 :答：前面我回答过类似的问题 function aa(){ var obj=document.getElementById("two");obj.style.visibility="visible";} function bb(){ var obj=document.getElementById("two");obj.style.visibility="hidden";}
