不规则背景图片滑动门

最新推荐文章于 2019-09-03 00:19:24 发布

飘零雾雨

最新推荐文章于 2019-09-03 00:19:24 发布

阅读量1.5k

点赞数

分类专栏： CSS 文章标签： xhtml html float class url 测试

本文链接：https://blog.csdn.net/storm0/article/details/1805993

版权

CSS 专栏收录该内容

43 篇文章 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's Menu</title>
<meta name="Author" content="飘零雾雨|edzmaster@gmail.com" />
</head>
<body>
<div class="dymenu">
<a href="#1" class="index"><span>Doyoe'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

收藏

觉得还不错? 一键收藏
0
评论
不规则背景图片滑动门

记得很久以前写过一个滑动门菜单的Demo，前些日子写了一种用越发不规则的图片做背景的滑动门菜单，但总有点瑕疵，因为会存在盲点区域，虽然范围很小，几乎可以忽略，但毕竟还是存在。先来看看演示再说。［演示地址：http://www.doyoe.com/model/xhtmlcss/menu/menu4/1.htm］CSS部分：html,body { margin:0;
复制链接

扫一扫