shopex不能兼容js，怎么办呢，客服界面要鼠标滑动弹出？？ css来了，兼容所有浏览器，用纯css写弹出层在好不过了。 源码1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style type="text/css" >
*{margin:0; padding:0;} /* 所有元素外边距为0 内边距为0 */
/\* body中元素字体大小为12px,字体样式为:"Times New Roman", Times, serif,背景色:#333 */
body{font-size:12px; font-family:"Times New Roman", Times, serif; }
/\* id为main的元素上下外边距为100px,左右外边距为自动;宽度为300px */
#main{margin-left:-100px auto; width:300px;z-index:10000; position:absolute;}
/\* id为main的元素中无序列表列表样式为隐藏 */
#main ul{list-style:none;}
/\* id为main的元素中的无序列表下的li块 中的a标签 颜色为#E7E7E7;关闭文本修饰;相对定位;元素当做块元素显示,前后会有换行符*/
.sa{color:#E7E7E7; text-decoration:none; position:relative; display:block;}
#y1 {position:fixed;top:482px;left:2px;}
ul{list-style:none;}
<span style="color:#FF0000"> .sa .divs {display:none;}
.sa:hover{color:#FFF;}
.sa:hover .divs{position:absolute; left:280px; top:-40px; background-color:#FFF; display:block; width:300px; height:100px; color:#000; overflow:hidden;}
.sa:hover .divs dt{float:left; width:8px; background:url(234.gif) center no-repeat;height:100px; display:block; background-color:#333;}
.sa:hover .divs dd{float:right ; width:270px; height:auto; line-height:18px; padding:6px 10px;margin-left:100px;}</span>
</style>
<body>
<script>
if (navigator.userAgent.indexOf("MSIE 6") > -1) {
window.onscroll = function(e) {
var t = document.documentElement ? document.documentElement.scrollTop : document.body.scrollTop;
document.getElementById("y1").style.top = document.getElementById("y2").style.top = t + 82 + "px";
}
}
</script>
<div id="y1">
<ul>
<li><div class="sa" href="javascript:void(0);">
<img src="images/siderim_hiddenbar.gif" style="z-index:10000; position:absolute;margin-top:-150px;" />
<div class="divs" style="margin-left:-284px;margin-top:-354px;height:440px;width:280px;background:url(images/bj01.png) no-repeat;z-index:10000; position:absolute;">
<img src="images/mhd365365.png" alt="" width="80" height="65" style="margin-top:90px;font-size:17px;width:80px;margin-left:180px;">
<div style="margin-left:40px;margin-top:-20px;;font-size:17px;color:#8498af;">0755—33537666</div>
<div style="margin-left:90px;margin-top:110px;width:160px;">
<ul>
<li>
<div style="width:80px;height:20px;padding-top:5px;">客服</div>
<div style="width:50px;margin-left:75px;margin-top:-22px;">
<a target="_blank" href="tencent://message/?uin=247765235&&Site=www.lanrenzhijia.com&&Menu=yes"><img
border="0" src="http://wpa.qq.com/pa?p=1:24776523:42"></a>
</div></li>
<div style="height:4px;"></div>
<li><div style="width:80px;height:20px;padding-top:5px;">客服</div>
<div style="width:50px;margin-left:75px;margin-top:-22px;">
<a target="_blank" href="tencent://message/?uin=24776523&&Site=www.lanrenzhijia.com&&Menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=1:24776523:42"></a></div></li>
<div style="height:4px;"></div>
<li>
<div style="width:80px;height:20px;padding-top:5px;">客服</div>
<div style="width:50px;margin-left:75px;margin-top:-22px;">
<a target="_blank" href="tencent://message/?uin=24776523&&Site=www.lanrenzhijia.com&&Menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=1:24776523:42"></a></div></li>
<div style="height:4px;"></div>
<li>
<div style="width:80px;height:20px;padding-top:5px;">客服</div>
<div style="width:50px;margin-left:75px;margin-top:-22px;">
<a target="_blank" href="tencent://messag0e/?uin=24776523&&Site=www.lanrenzhijia.com&&Menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=1:24776523:42"></a></div></li>
<div style="height:4px;"></div>
<li>
<div style="width:80px;height:20px;padding-top:5px;">客服</div>
<div style="width:50px;margin-left:75px;margin-top:-22px;">
<a target="_blank" href="tencent://message/?uin=24776523&&Site=www.lanrenzhijia.com&&Menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=1:24776523:42"></a></div></li>
<div style="height:4px;"></div>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
</body>
</html>
本文链接： https://erik.xyz/2014/11/26/css-shu-biao-hua-guo-dan-chu-ceng-ke-fu/
版权声明： 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。转载请注明出处！
