关闭

不规则背景图片滑动门

标签: xhtmlhtmlfloatclassurl测试
1183人阅读 评论(0) 收藏 举报
分类:
     记得很久以前写过一个滑动门菜单的Demo,前些日子写了一种用越发不规则的图片做背景的滑动门菜单,但总有点瑕疵,因为会存在盲点区域,虽然范围很小,几乎可以忽略,但毕竟还是存在。先来看看演示再说。

      [演示地址:http://www.doyoe.com/model/xhtmlcss/menu/menu4/1.htm

CSS部分:

html,body {
 margin:0;
 font:12px "宋体";
}
.dymenu {
 padding:50px;
 overflow:hidden;
}
.dymenu a {
 margin-left:-21px;
 color:#050;
 line-height:22px;
 text-decoration:none;
 background:url(left.gif) left 0 no-repeat;
 float:left;
}
.dymenu a span {
 margin-left:21px;
 padding:0 31px 0 10px;
 background:url(right.gif) right 0 no-repeat;
 cursor:pointer;
 float:left;
}
.dymenu a:hover,.dymenu a.index {
 color:#444;
 background-position:left -23px;
}
.dymenu a:hover span,.dymenu a.index span {
 background-position:right -23px;
}

XHTML部分:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Doyoe&#39;s Menu</title>
<meta name="Author" content="飘零雾雨|edzmaster@gmail.com" />
</head>
<body>
<div class="dymenu">
 <a href="#1" class="index"><span>Doyoe&#39;s Menu</span></a>
 <a href="#2"><span>About Me</span></a>
 <a href="#3"><span>Contact Me</span></a>
 <a href="#4"><span>I can adaptive width</span></a>
</div>
</body>
</html>

      上面的效果应该没什么问题吧 :) 呵呵,一直期望能够不会有问题,可问题就喜欢和你瞎纠缠。

      回到前面说的盲点区域上来,细心的你会发现除最后面的一个链接外,每个链接的右上角区域都会有一块鼠标无法点击的区域。虽说地方不大,但留着总是碍眼。

      有一个方法可以消除这块盲点,在测试的同学,可以给hover状态加一个zIndex:

.dymenu a:hover {
 position:relative;
 z-index:99;
 color:#444;
 background-position:left -23px;
}

      意思就是说hover状态的链接级别总是在别的链接之上,这样右上角的盲点区域自然就可以消除了。可这样,别的问题又来了,hover状态的链接会将下一个链接的左下角位置遮盖,这样又出现了除第一个链接之外的左下角盲点区域。

      真够折腾的,不知道哪位同学有消除这两个盲点区域的好方法,感谢留言:)

 
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:48498次
    • 积分:1003
    • 等级:
    • 排名:千里之外
    • 原创:47篇
    • 转载:0篇
    • 译文:0篇
    • 评论:9条
    文章分类
    最新评论
    飘零雾雨的相关链接