网站右侧悬浮窗HTML代码

效果预览

部署教程

Html代码

1. <div class="wapnone fk_service">
   
2. <ul>
   
3. <li>
   
4. <div class="fk_service_consult_cont1" style="display: none;"> <span class="fk_service_triangle"></span> 在线咨询 </div>
   
5. </li>
   
6. <li class="fk_service_box fk_service_consult">
   
7. <div class="fk_service_consult_cont"> <span class="fk_service_triangle"></span>
   
8. <div class="fk_service_consult_cont_top"> <span class="fk_service_hint"> <span class="fk_service_icon"></span>
   
9. <span> 如遇问题，请联系站长 </span> </span> <span class="fk_service_button" onclick="window.open('https://wpa.qq.com/msgrd?v=3&uin=123456&site=qq&menu=yes')">QQ联系</span>
   
10. <span class="fk_service_button" onclick="window.open('https://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=cpol@qq.com')">在线邮件</span>
    
11. </div> <span class="fk_service_phone"> QQ 请注明来意 ：123456 </span> <span class="fk_service_check_site"> <span class="fk_service_icon"></span>
    
12. <span onclick="window.open('https://huliku.com')">更多：狐狸库</span> </span>
    
13. </div>
    
14. </li>
    
15. <li class="fk_service_box fk_service_qr">
    
16. <div class="fk_service_qr_cont"> <span class="fk_service_triangle"></span>
    
17. <div class="fk_service_qrimg"> <span class="fk_service_qrimg_site"></span> 微信公众号 </div>
    
18. <div class="fk_service_qrtext"><span>奇思妙想 · 科技小新</span></div>
    
19. </div>
    
20. </li>
    
21. <!-- 不需要图标的注释或删除即可 -->
    
22. <li class="fk_service_box fk_service_ax" onclick="window.open('https://huliku.com/index.php/t.html')">
    
23. <div class="fk_service_ax_cont"> <span class="fk_service_triangle"></span> 提交收录，站长收到留言后即刻处理！ </div>
    
24. </li>
    
25. <li class="fk_service_box fk_service_dh" onclick="window.open('https://huliku.com/index.php/t.html')">
    
26. <div class="fk_service_dh_cont"> <span class="fk_service_triangle"></span> 提交收录，站长收到留言后即刻处理！ </div>
    
27. </li>
    
28. <li class="fk_service_box fk_service_jk" onclick="window.open('https://huliku.com/index.php/t.html')">
    
29. <div class="fk_service_jk_cont"> <span class="fk_service_triangle"></span> 提交收录，站长收到留言后即刻处理！ </div>
    
30. </li>
    
31. <li class="fk_service_box fk_service_ws" onclick="window.open('https://huliku.com/index.php/t.html')">
    
32. <div class="fk_service_ws_cont"> <span class="fk_service_triangle"></span> 提交收录，站长收到留言后即刻处理！ </div>
    
33. </li>
    
34. <li class="fk_service_box fk_service_sd" onclick="window.open('https://huliku.com/index.php/t.html')">
    
35. <div class="fk_service_sd_cont"> <span class="fk_service_triangle"></span> 提交收录，站长收到留言后即刻处理！ </div>
    
36. </li>
    
37. <li class="fk_service_box fk_service_dz" onclick="window.open('https://huliku.com/index.php/t.html')">
    
38. <div class="fk_service_dz_cont"> <span class="fk_service_triangle"></span> 提交收录，站长收到留言后即刻处理！ </div>
    
39. </li>
    
40. <li class="fk_service_box fk_service_feedback" onclick="window.open('https://huliku.com/index.php/t.html')">
    
41. <div class="fk_service_feedback_cont"> <span class="fk_service_triangle"></span> 提交收录，站长收到留言后即刻处理！ </div>
    
42. </li>
    
43. <li class="fk_service_box fk_service_upward" onclick="FkService.fk_upWard();" style="display: block;">
    
44. <div class="fk_service_upward_cont"> <span class="fk_service_triangle"></span> <span> 返回顶部 </span> </div>
    
45. </li>
    
46. </ul>
    
47. </div>

复制代码

Css代码

1. <style>
   
2. 
   
3. .fk_service {
   
4.         max-height: 232px;
   
5.         position: fixed;
   
6.         right: 10px;
   
7.         top: 40%;
   
8. /* 垂直位置 */
   
9.         font-family: "寰蒋闆呴粦";
   
10.         font-size: 14px;
    
11.         color: #243558;
    
12.         z-index: 10000
    
13. }
    
14. 
    
15. .fk_service ul {
    
16.         margin: 0;
    
17.         padding: 0;
    
18.         position: absolute;
    
19.         right: 0
    
20. }
    
21. 
    
22. .fk_service li {
    
23.         list-style-type: none
    
24. }
    
25. 
    
26. .fk_service li>div {
    
27.         box-sizing: border-box;
    
28.         box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.1)
    
29. }
    
30. 
    
31. .fk_service_box {
    
32.         width: 40px;
    
33.         height: 40px;
    
34.         background: #fff;
    
35.         margin-bottom: 10px;
    
36.         border-radius: 4px;
    
37.         box-sizing: border-box;
    
38.         box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.1)
    
39. }
    
40. 
    
41. .fk_service_triangle {
    
42.         top: 12px;
    
43.         right: -11px;
    
44.         position: absolute;
    
45.         border-top: 7px solid transparent;
    
46.         border-bottom: 7px solid transparent;
    
47.         border-left: 11px solid #e1e6ec;
    
48.         z-index: 1010
    
49. }
    
50. 
    
51. .fk_service_triangle:after {
    
52.         content: "\20";
    
53.         top: -6px;
    
54.         right: 1px;
    
55.         position: absolute;
    
56.         border-top: 6px solid transparent;
    
57.         border-bottom: 6px solid transparent;
    
58.         border-left: 10px solid #fff;
    
59.         z-index: 1000
    
60. }
    
61. 
    
62. .fk_service_triangle:before {
    
63.         content: "\20";
    
64.         width: 80px;
    
65.         height: 45px;
    
66.         top: -20px;
    
67.         right: -52px;
    
68.         position: absolute;
    
69.         background: rgba(0, 0, 0, 0)
    
70. }
    
71. 
    
72. @keyframes fade-in {
    
73. 
    
74.         0% {
    
75.                 opacity: .4;
    
76.                 right: 82px
    
77.         }
    
78. 
    
79.         100% {
    
80.                 opacity: 1;
    
81.                 right: 62px
    
82.         }
    
83. }
    
84. 
    
85. .fk_service_consult {
    
86.         background: url(https://a-oss.zmki.cn/2019/20190827-5d652476ab305.png) no-repeat -366px -16px #fff
    
87. }
    
88. 
    
89. .fk_service_consult:hover {
    
90.         border: 0;
    
91.         background: url(https://a-oss.zmki.cn/2019/20190827-5d652476ab305.png) no-repeat -410px -16px #4f7cfc
    
92. }
    
93. 
    
94. .fk_service_consult:hover .fk_service_consult_cont {
    
95.         display: block;
    
96.         opacity: 1;
    
97.         transition: linear .2s;
    
98.         animation-name: fade-in;
    
99.         animation-duration: .3s;
    
100.         animation-iteration-count: 1;
     
101.         animation-delay: 0s
     
102. }
     
103. 
     
104. .fk_service_consult_cont {
     
105.         width: 200px;
     
106.         min-height: 210px;
     
107.         max-height: 268px;
     
108.         border-radius: 3px;
     
109.         background: #fff;
     
110.         right: 62px;
     
111.         position: absolute;
     
112.         text-align: center;
     
113.         border: 1px solid #e1e6ec;
     
114.         display: none;
     
115.         opacity: 0
     
116. }
     
117. 
     
118. .fk_service_consult_cont1 {
     
119.         width: 70px;
     
120.         height: 40px;
     
121.         line-height: 40px;
     
122.         background: #fff;
     
123.         border-radius: 5px;
     
124.         right: 62px;
     
125.         text-align: center;
     
126.         position: absolute;
     
127.         display: none;
     
128.         border: 1px solid #e1e6ec
     
129. }
     
130. 
     
131. .fk_service_consult_cont1 .fk_service_triangle:before {
     
132.         width: 0 !important
     
133. }
     
134. 
     
135. .fk_service_consult_cont>.fk_service_triangle:after {
     
136.         border-left: 10px solid #f6f8fb !important
     
137. }
     
138. 
     
139. .fk_service_consult_cont span {
     
140.         float: left
     
141. }
     
142. 
     
143. .fk_service_consult_cont_top {
     
144.         width: 100%;
     
145.         height: 157px;
     
146.         background: #f6f8fb;
     
147.         border-radius: 3px;
     
148.         border-bottom: 1px solid #eef2f8
     
149. }
     
150. 
     
151. .fk_service_hint {
     
152.         width: 100%;
     
153.         height: 40px;
     
154.         line-height: 40px;
     
155.         font-size: 12px;
     
156.         color: #9aa8c2;
     
157.         text-align: center
     
158. }
     
159. 
     
160. .fk_service_hint>.fk_service_icon {
     
161.         background: url(https://a-oss.zmki.cn/2019/20190827-5d652476ab305.png) no-repeat -460px -25px;
     
162.         width: 15px;
     
163.         height: 15px;
     
164.         margin: 13px 2px 0 18px
     
165. }
     
166. 
     
167. .fk_service_button {
     
168.         width: 160px;
     
169.         height: 38px;
     
170.         line-height: 38px;
     
171.         background: #4f7cfc;
     
172.         border-radius: 18px;
     
173.         text-align: center;
     
174.         color: #fff;
     
175.         margin: 5px 0 10px 20px;
     
176.         cursor: pointer
     
177. }
     
178. 
     
179. .fk_service_button:hover {
     
180.         background: #618aff
     
181. }
     
182. 
     
183. .fk_service_phone {
     
184.         width: 100%;
     
185.         height: 53px;
     
186.         line-height: 53px;
     
187.         font-size: 14px;
     
188.         text-align: center
     
189. }
     
190. 
     
191. .fk_service_check_site {
     
192.         width: 100%;
     
193.         height: 48px;
     
194.         line-height: 48px;
     
195.         color: #3b6bf4;
     
196.         border-top: 1px solid #eaeef5;
     
197.         cursor: pointer
     
198. }
     
199. 
     
200. .fk_service_check_site>.fk_service_icon {
     
201.         background: url(https://a-oss.zmki.cn/2019/20190827-5d652476ab305.png) no-repeat -461px -75px;
     
202.         width: 20px;
     
203.         height: 20px;
     
204.         margin: 15px 2px 0 45px
     
205. }
     
206. 
     
207. .fk_service_feedback {
     
208.         background: url(https://a-oss.zmki.cn/2019/20190827-5d652476ab305.png) no-repeat -363px -64px #fff
     
209. }
     
210. 
     
211. .fk_service_feedback:hover {
     
212.         border: 0;
     
213.         background: url(https://a-oss.zmki.cn/2019/20190827-5d652476ab305.png) no-repeat -407px -64px #4f7cfc;
     
214.         cursor: pointer
     
215. }
     
216. 
     
217. .fk_service_feedback:hover .fk_service_feedback_cont {
     
218.         display: block;
     
219.         opacity: 1;
     
220.         transition: linear .2s;
     
221.         animation-name: fade-in;
     
222.         animation-duration: .3s;
     
223.         animation-iteration-count: 1;
     
224.         animation-delay: 0s
     
225. }
     
226. 
     
227. .fk_service_feedback_cont {
     
228.         width: 264px;
     
229.         height: 40px;
     
230.         line-height: 40px;
     
231.         background: #fff;
     
232.         border-radius: 5px;
     
233.         right: 62px;
     
234.         text-align: center;
     
235.         position: absolute;
     
236.         display: none;
     
237.         border: 1px solid #e1e6ec
     
238. }
     
239. 
     
240. .fk_service_qr {
     
241.         background: url(https://a-oss.zmki.cn/2019/20190827-5d652476ab305.png) no-repeat -365px -113px #fff
     
242. }
     
243. 
     
244. .fk_service_qr:hover {
     
245.         border: 0;
     
246.         background: url(https://a-oss.zmki.cn/2019/20190827-5d652476ab305.png) no-repeat -409px -113px #4f7cfc
     
247. }
     
248. 
     
249. .fk_service_qr:hover .fk_service_qr_cont {
     
250.         display: block;
     
251.         opacity: 1;
     
252.         transition: linear .2s;
     
253.         animation-name: fade-in;
     
254.         animation-duration: .3s;
     
255.         animation-iteration-count: 1;
     
256.         animation-delay: 0s
     
257. }
     
258. 
     
259. .fk_service_qr_cont {
     
260.         width: 143px;
     
261.         height: 202px;
     
262.         border-radius: 3px;
     
263.         background: #fff;
     
264.         right: 62px;
     
265.         position: absolute;
     
266.         text-align: center;
     
267.         border: 1px solid #e1e6ec;
     
268.         background-color: #f6f8fb;
     
269.         display: none;
     
270.         opacity: 0
     
271. }
     
272. 
     
273. .fk_service_qr_cont>.fk_service_triangle:after {
     
274.         border-left: 10px solid #f6f8fb !important
     
275. }
     
276. 
     
277. .fk_service_qr_cont>.fk_service_qrimg {
     
278.         width: 100%;
     
279.         height: 164px;
     
280.         float: left
     
281. }
     
282. 
     
283. .fk_service_qrimg_site {
     
284.         width: 119px;
     
285.         height: 119px;
     
286.         float: left;
     
287.         margin: 12px 12px 5px 12px;
     
288.         background: url(https://a-oss.zmki.cn/2019/20190827-5d652476ab305.png) no-repeat -41px -26px
     
289. }
     
290. 
     
291. .fk_service_qrimg_hd {
     
292.         width: 119px;
     
293.         height: 119px;
     
294.         float: left;
     
295.         margin: 12px 12px 5px 12px;
     
296.         background: url(https://a-oss.zmki.cn/2019/20190827-5d652476ab305.png) no-repeat -198px -26px
     
297. }
     
298. 
     
299. .fk_service_qrimg_wxast {
     
300.         width: 119px;
     
301.         height: 119px;
     
302.         float: left;
     
303.         margin: 12px 12px 5px 12px;
     
304.         background: url(../image/fk_service.png?v=201905151200) no-repeat -198px -328px
     
305. }
     
306. 
     
307. .fk_service_qrimg_flyer {
     
308.         width: 119px;
     
309.         height: 119px;
     
310.         float: left;
     
311.         margin: 12px 12px 5px 12px;
     
312.         background: url(https://a-oss.zmki.cn/2019/20190827-5d652476ab305.png) no-repeat -41px -177px
     
313. }
     
314. 
     
315. .fk_service_qrimg_wxapp {
     
316.         width: 119px;
     
317.         height: 119px;
     
318.         float: left;
     
319.         margin: 12px 12px 5px 12px;
     
320.         background: url(https://a-oss.zmki.cn/2019/20190827-5d652476ab305.png) no-repeat -198px -177px
     
321. }
     
322. 
     
323. .fk_service_qrimg_fkmall {
     
324.         width: 119px;
     
325.         height: 119px;
     
326.         float: left;
     
327.         margin: 12px 12px 5px 12px;
     
328.         background: url(https://a-oss.zmki.cn/2019/20190827-5d652476ab305.png) no-repeat -41px -326px
     
329. }
     
330. 
     
331. .fk_service_qr_cont>.fk_service_qrtext {
     
332.         width: 100%;
     
333.         height: 35px;
     
334.         font-size: 12px;
     
335.         color: #7b89a6;
     
336.         background-color: #fff;
     
337.         float: left;
     
338.         bottom: 0;
     
339.         display: table
     
340. }
     
341. 
     
342. .fk_service_qr_cont>.fk_service_qrtext>span {
     
343.         display: table-cell;
     
344.         vertical-align: middle
     
345. }
     
346. 
     
347. .fk_service_upward {
     
348.         display: none;
     
349.         background: url(https://a-oss.zmki.cn/2019/20190827-5d652476ab305.png) no-repeat -363px -159px #fff
     
350. }
     
351. 
     
352. .fk_service_upward:hover {
     
353.         border: 0;
     
354.         background: url(https://a-oss.zmki.cn/2019/20190827-5d652476ab305.png) no-repeat -407px -159px #4f7cfc;
     
355.         cursor: pointer
     
356. }
     
357. 
     
358. .fk_service_upward:hover .fk_service_upward_cont {
     
359.         display: block;
     
360.         opacity: 1;
     
361.         transition: linear .2s;
     
362.         animation-name: fade-in;
     
363.         animation-duration: .3s;
     
364.         animation-iteration-count: 1;
     
365.         animation-delay: 0s
     
366. }
     
367. 
     
368. .fk_service_upward_cont {
     
369.         width: 84px;
     
370.         height: 40px;
     
371.         line-height: 40px;
     
372.         border-radius: 3px;
     
373.         background: #fff;
     
374.         right: 62px;
     
375.         position: absolute;
     
376.         text-align: center;
     
377.         border: 1px solid #e1e6ec;
     
378.         display: none;
     
379.         opacity: 0
     
380. }
     
381. 
     
382. .fk_service_upward_cont span {
     
383.         font-size: 14px
     
384. }
     
385. 
     
386. /* ----------------------------------------------------------------------- */
     
387. 
     
388. /* 新增图标->zmki 开始*/
     
389. 
     
390. .fk_service_jk {
     
391. /* 前景图标 */
     
392.         background: url(https://a-oss.zmki.cn/2019/20191218-c9feba3074fcf.png) no-repeat center center #fff;
     
393.         background-size: 40%40%;
     
394. }
     
395. 
     
396. .fk_service_jk:hover {
     
397.         border: 0;
     
398. /* 鼠标悬浮图标 */
     
399.         background: url(https://a-oss.zmki.cn/2019/20191218-9e8acd5341cdc.png) no-repeat center center #4f7cfc;
     
400.         background-size: 40%40%;
     
401.         cursor: pointer
     
402. }
     
403. 
     
404. .fk_service_jk:hover .fk_service_jk_cont {
     
405.         display: block;
     
406.         opacity: 1;
     
407.         transition: linear .2s;
     
408.         animation-name: fade-in;
     
409.         animation-duration: .3s;
     
410.         animation-iteration-count: 1;
     
411.         animation-delay: 0s
     
412. }
     
413. 
     
414. .fk_service_jk_cont {
     
415.         width: 264px;
     
416.         height: 40px;
     
417.         line-height: 40px;
     
418.         background: #fff;
     
419.         border-radius: 5px;
     
420.         right: 62px;
     
421.         text-align: center;
     
422.         position: absolute;
     
423.         display: none;
     
424.         border: 1px solid #e1e6ec
     
425. }
     
426. 
     
427. /* 新增图标->zmki 结束*/
     
428. 
     
429. /* 新增图标->zmki 开始*/
     
430. 
     
431. .fk_service_ws {
     
432.         background: url(https://a-oss.zmki.cn/2019/20191218-61b4baac98ee7.png) no-repeat center center #fff;
     
433.         background-size: 50%50%;
     
434. }
     
435. 
     
436. .fk_service_ws:hover {
     
437.         border: 0;
     
438.         background: url(https://a-oss.zmki.cn/2019/20191218-8ded04c01bb3c.png) no-repeat center center #4f7cfc;
     
439.         background-size: 50%50%;
     
440.         cursor: pointer
     
441. }
     
442. 
     
443. .fk_service_ws:hover .fk_service_ws_cont {
     
444.         display: block;
     
445.         opacity: 1;
     
446.         transition: linear .2s;
     
447.         animation-name: fade-in;
     
448.         animation-duration: .3s;
     
449.         animation-iteration-count: 1;
     
450.         animation-delay: 0s
     
451. }
     
452. 
     
453. .fk_service_ws_cont {
     
454.         width: 264px;
     
455.         height: 40px;
     
456.         line-height: 40px;
     
457.         background: #fff;
     
458.         border-radius: 5px;
     
459.         right: 62px;
     
460.         text-align: center;
     
461.         position: absolute;
     
462.         display: none;
     
463.         border: 1px solid #e1e6ec
     
464. }
     
465. 
     
466. /* 新增图标->zmki 结束*/
     
467. 
     
468. /* 闪电 新增图标->zmki 开始*/
     
469. 
     
470. .fk_service_sd {
     
471.         background: url(https://a-oss.zmki.cn/2019/20191218-94664bd399372.png) no-repeat center center #fff;
     
472.         background-size: 50%50%;
     
473. }
     
474. 
     
475. .fk_service_sd:hover {
     
476.         border: 0;
     
477.         background: url(https://a-oss.zmki.cn/2019/20191218-fab840acee28b.png) no-repeat center center #4f7cfc;
     
478.         background-size: 50%50%;
     
479.         cursor: pointer
     
480. }
     
481. 
     
482. .fk_service_sd:hover .fk_service_sd_cont {
     
483.         display: block;
     
484.         opacity: 1;
     
485.         transition: linear .2s;
     
486.         animation-name: fade-in;
     
487.         animation-duration: .3s;
     
488.         animation-iteration-count: 1;
     
489.         animation-delay: 0s
     
490. }
     
491. 
     
492. .fk_service_sd_cont {
     
493.         width: 264px;
     
494.         height: 40px;
     
495.         line-height: 40px;
     
496.         background: #fff;
     
497.         border-radius: 5px;
     
498.         right: 62px;
     
499.         text-align: center;
     
500.         position: absolute;
     
501.         display: none;
     
502.         border: 1px solid #e1e6ec
     
503. }
     
504. 
     
505. /*闪电 新增图标->zmki 结束*/
     
506. 
     
507. /* 导航 新增图标->zmki 开始*/
     
508. 
     
509. .fk_service_dh {
     
510.         background: url(https://a-oss.zmki.cn/2019/20191218-711bcdc875f32.png) no-repeat center center #fff;
     
511.         background-size: 60%60%;
     
512. }
     
513. 
     
514. .fk_service_dh:hover {
     
515.         border: 0;
     
516.         background: url(https://a-oss.zmki.cn/2019/20191218-8d9cf4c72a239.png) no-repeat center center #4f7cfc;
     
517.         background-size: 60%60%;
     
518.         cursor: pointer
     
519. }
     
520. 
     
521. .fk_service_dh:hover .fk_service_dh_cont {
     
522.         display: block;
     
523.         opacity: 1;
     
524.         transition: linear .2s;
     
525.         animation-name: fade-in;
     
526.         animation-duration: .3s;
     
527.         animation-iteration-count: 1;
     
528.         animation-delay: 0s
     
529. }
     
530. 
     
531. .fk_service_dh_cont {
     
532.         width: 264px;
     
533.         height: 40px;
     
534.         line-height: 40px;
     
535.         background: #fff;
     
536.         border-radius: 5px;
     
537.         right: 62px;
     
538.         text-align: center;
     
539.         position: absolute;
     
540.         display: none;
     
541.         border: 1px solid #e1e6ec
     
542. }
     
543. 
     
544. /*导航 新增图标->zmki 结束*/
     
545. 
     
546. /* 爱心 新增图标->zmki 开始*/
     
547. 
     
548. .fk_service_ax {
     
549.         background: url(https://a-oss.zmki.cn/2019/20191218-bf1792e790a39.png) no-repeat center center #fff;
     
550.         background-size: 40%40%;
     
551. }
     
552. 
     
553. .fk_service_ax:hover {
     
554.         border: 0;
     
555.         background: url(https://a-oss.zmki.cn/2019/20191218-f379809ce7aef.png) no-repeat center center #4f7cfc;
     
556.         background-size: 40%40%;
     
557.         cursor: pointer
     
558. }
     
559. 
     
560. .fk_service_ax:hover .fk_service_ax_cont {
     
561.         display: block;
     
562.         opacity: 1;
     
563.         transition: linear .2s;
     
564.         animation-name: fade-in;
     
565.         animation-duration: .3s;
     
566.         animation-iteration-count: 1;
     
567.         animation-delay: 0s
     
568. }
     
569. 
     
570. .fk_service_ax_cont {
     
571.         width: 264px;
     
572.         height: 40px;
     
573.         line-height: 40px;
     
574.         background: #fff;
     
575.         border-radius: 5px;
     
576.         right: 62px;
     
577.         text-align: center;
     
578.         position: absolute;
     
579.         display: none;
     
580.         border: 1px solid #e1e6ec
     
581. }
     
582. 
     
583. /*爱心 新增图标->zmki 结束*/
     
584. 
     
585. /* 点赞 新增图标->zmki 开始*/
     
586. 
     
587. .fk_service_dz {
     
588.         background: url(https://a-oss.zmki.cn/2019/20191218-3d077e8df0bf0.png) no-repeat center center #fff;
     
589.         background-size: 50%50%;
     
590. }
     
591. 
     
592. .fk_service_dz:hover {
     
593.         border: 0;
     
594.         background: url(https://a-oss.zmki.cn/2019/20191218-986a9393f3e9e.png) no-repeat center center #4f7cfc;
     
595.         background-size: 50%50%;
     
596.         cursor: pointer
     
597. }
     
598. 
     
599. .fk_service_dz:hover .fk_service_dz_cont {
     
600.         display: block;
     
601.         opacity: 1;
     
602.         transition: linear .2s;
     
603.         animation-name: fade-in;
     
604.         animation-duration: .3s;
     
605.         animation-iteration-count: 1;
     
606.         animation-delay: 0s
     
607. }
     
608. 
     
609. .fk_service_dz_cont {
     
610.         width: 264px;
     
611.         height: 40px;
     
612.         line-height: 40px;
     
613.         background: #fff;
     
614.         border-radius: 5px;
     
615.         right: 62px;
     
616.         text-align: center;
     
617.         position: absolute;
     
618.         display: none;
     
619.         border: 1px solid #e1e6ec
     
620. }
     
621. 
     
622. /*点赞 新增图标->zmki 结束*/
     
623. 
     
624. /* 手机端自动隐藏 开始 */
     
625. 
     
626. @media screen and (max-width: 1221px) {
     
627.         .wapnone {
     
628.                 display: none;
     
629.         }
     
630. }
     
631. 
     
632. /* 手机端自动隐藏 结束 */
     
633. 
     
634. </style>

复制代码

里面的图标地址自行替换！

kankan  看看

眼花了

SanS三石 发表于 2024-5-9 20:53
眼花了

整的太乱了，我给他修理修理