1鼠标移上去在图片上层添加一个蒙版 下边附上代码和实现效果案例 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <script src="http://code.jquery.com/jquery-latest.js"></script>
7
8 <link rel="stylesheet" type="text/css" href="css/animate.min.css"/>
9 </head>
10 <style type="text/css">
11 #xx{
12 position: relative;width: 200px;height: 200px;
13 }
14 .mb{
15 height:200px; width:200px;
16 background-color:#9e9e9e;filter:Alpha(Opacity=60);position:absolute;opacity:0.6;top:0;left:0;z-index:10;
17 text-align:center;
18 }
19 #mb_text{
20 line-height: 200px;
21 }
22 .current{
23 display: none;
24 }
25 </style>
26 <script type="text/javascript">
27 $(function(){
28 $("#xx").hover(function(){
29 $("#mm").toggle();
30 });
31 })
32 </script>
33 <body>
34 <div id="xx" class="img">
35 <img src="//pic.ikafan.com/imgp/L3Byb3h5L2h0dHAvaW1nMzAuMzYwYnV5aW1nLmNvbS9jZi9qZnMvdDIyNzIvMjI1LzEzMzUyODEwNDkvODA0Ni8xNGFmYjlhLzU2NTgwNWMxTmIzZWIzYzYzLmpwZw==.jpg" style="width: 200px;height: 200px;"/>
36 <div id="mm" class="mb current">
37 <span id="mb_text" class="animated bounceIn">
38 <a href="#" onclick="alert(‘123‘)">---- 更多 ----</a>
39 </span>
40 </div>
41
42 </div>
43 </body>
44 </html>
---- 更多 ----
时间： 2024-08-17 22:13:12