首页 > 代码库 > CSS实现鼠标移入图片边框有小三角

CSS实现鼠标移入图片边框有小三角

2024-10-06 19:13:39   216人阅读

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>无标题文档</title>
 6 <style>
 7 body {
 8     background:#999;
 9     }
10 a { 
11     display: block; 
12     position: relative; 
13     width:64px;
14     height:64px;
15     margin: 100px auto;
16     }
17 a:hover em { 
18     display:block; 
19     position:absolute; 
20     left:26px; /*(a的宽度-em的宽度)/2*/
21     top:-12px; /*em自身边框宽度的二倍*/
22     border-width:6px; 
23     border-style:solid; 
24     border-color: transparent transparent #fff;/*transparent 用来指定全透明色彩*/  
25     }
26 a:hover img {
27     width:58px;
28     height:58px; 
29     border:3px solid #fff; 
30     opacity:1; filter:alpha(opacity:100); 
31     }
32 a img { 
33     width:60px;
34     height:60px; 
35     border: 2px solid #dfe8e4; 
36     background:#040303; 
37     opacity:0.7; 
38     filter:alpha(opacity:70); 
39     }
40 </style>
41 </head>
42 
43 <body>
44 <a><em></em><img src="img/2.jpg" /></a>
45 </body>
46 </html>

 

CSS实现鼠标移入图片边框有小三角


联系
我们