您的位置：首页 > Web前端 > CSS

css鼠标滑过弹出层客服

2014-06-20 09:43 441 查看
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>


原文链接地址: http://www.erik.xyz/cssshub/   href="http://www.erik.xyz" target=_blank>木木夕
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航