css鼠标滑过弹出层客服

2014-11-26

字数统计: 1.1k字 | 阅读时长: 6分 | 本文总阅读量0次

shopex不能兼容js，怎么办呢，客服界面要鼠标滑动弹出？？ css来了，兼容所有浏览器，用纯css写弹出层在好不过了。源码

<!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>

本文作者： 艾瑞可erik
本文链接： https://erik.xyz/2014/11/26/css-shu-biao-hua-guo-dan-chu-ceng-ke-fu/
版权声明： 本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。转载请注明出处！

jsonContent: meta: false pages: false posts: title: true date: true path: true text: false raw: false content: false slug: false updated: false comments: false link: false permalink: false excerpt: false categories: false tags: true