找回密码
 注册
搜索
热搜: 回贴

实用:JS实现鼠标悬停显示不同的页面

2009-12-16 02:40| 发布者: admin| 查看: 56| 评论: 0|原作者: 心然

当鼠标按顺序悬停在菜单上时,可在同一位置显示不同的页面
作者:Stu Nicholls 
翻译:forestgan
信息
这是 cssplay的站长根据其最近创作的dropdown and flyout menus而改编而成的,当鼠标按顺序悬停在菜单上时,可在同一位置显示不同的页面,可在Opera, IE5.5, IE6, IE7 beta,Safari 1.3.2 & Firefox.中正确显示和工作,不兼容Mac IE5。
鼠标悬停在菜单和页面上时显示文字与图片以及链接,滚动条要加在每个页上。
样式
对于非IE浏览器来说是比较简单的,只用一个样式表。

/* common styling */
/* set up the overall width of the menu div, the font and the margins with a relative position*/
.menu {
font-family: verdana, arial, sans-serif;
width:750px;
margin:0;
position:relative;
}
/* remove the bullets and set the margin and padding to zero for the unordered list */
.menu ul {
padding:0;
margin:0;
list-style-type: none;
border:0;
}
/* float the list so that the items are in a line */
.menu ul li {
float:left;
}
/* style the links to be 249px wide by 30px high with a top and right border 1px solid white. Set the background color and the font size. */
.menu ul li a, .menu ul li a:visited {
display:block;
text-align:center;
text-decoration:none;
width:249px;
height:30px;
color:#000;
border:1px solid #fff;
border-width:1px 1px 0 0;
background:#c9c9a7;
line-height:30px;
font-size:11px;
}
/* make the dropdown ul invisible */
.menu ul li ul {
display: none;
}
/* specific to non IE browsers */
/* set the background and foreground color of the main menu li on hover */
.menu ul li:hover a {
color:#fff;
background:#b3ab79;
}
/* make the sub menu ul visible and position it beneath the first list item */
.menu ul li:hover ul {
text-align:left;
display:block;
position:absolute;
top:30px;
left:0;
text-align:left;
}
/* make the sub menu ul li the full width with padding and border. Add an auto scroll bar */
.menu ul li:hover ul li {
background:#eee;
color:#000;
padding:10px;
width:689px;
height:180px;
overflow:auto;
border:20px solid #b3ab79;
}
/*float the image left with padding and no border */
.menu ul li:hover ul li img {
float:left;
padding:10px 10px 10px 0;
border:0;
}
/* style the paragraph font height */
.menu ul li:hover ul li p {
font-size:0.9em;
}
/* style the background and foreground color of the submenu links */
.menu ul li:hover ul li a {
display:inline;
background:#eee;
color:#c00;
text-decoration:underline;
border:0;
}
/* style the background and forground colors of the links on hover */
.menu ul li:hover ul li a:hover {
text-decoration:none;
color:#000;
}
而IE还需要专门为它加一个,用条件判断加入。

/* styling specific to Internet Explorer IE5.5 and IE6. Yet to see if IE7 handles li:hover */
/* Get rid of any default table style */
table {
border-collapse:collapse;
margin:0;
padding:0;
}
/* ignore the link used by 'other browsers' */
.menu ul li a.hide, .menu ul li a:visited.hide {
display:none;
}
/* set the background and foreground color of the main menu link on hover */
.menu ul li a:hover {
color:#fff;
background:#b3ab79;
}
/* make the sub menu ul visible and position it beneath the first list item */
.menu ul li a:hover ul {
text-align:left;
display:block;
position:absolute;
top:31px;
left:0;
}
/* make the sub menu ul li the full width with padding and border. Add an auto scroll bar */
.menu ul li a:hover ul li {
background:#eee;
color:#000;
padding:10px;
width:746px;
height:240px;
overflow:auto;
border:20px solid #b3ab79;
w\idth:689px;
he\ight:180px;
}
/*float the image left with padding and no border */
.menu ul li a:hover li img {
float:left;
padding:10px 10px 10px 0;
border:0;
}
/* style the paragraph font height */
.menu ul li a:hover p {
font-size:0.7em;
f\ont-size:1em;
}
/* style the background and foreground color of the submenu links */
.menu ul li a:hover ul li a {
display:inline;
width:1px;
word-wrap:normal;
background:#eee;
color:#c00;
text-decoration:underline;
border:0;
}
/* style the background and forground colors of the links on hover */
.menu ul li a:hover ul li a:hover {
text-decoration:none;
color:#000;
}
xhtml
你会看到用条件判断来给 IE添加表格,. 其他浏览器不会用到表格,而将正常使用无序列表。文档类型声明是必须要加的,反之不能正常工作。
运行代码框





stu nicholls | CSS PLaY | cross browser tabbed pages with embeded links





















[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

最新评论

QQ|小黑屋|最新主题|手机版|微赢网络技术论坛 ( 苏ICP备08020429号 )

GMT+8, 2024-9-30 11:28 , Processed in 0.176256 second(s), 12 queries , Gzip On, MemCache On.

Powered by Discuz! X3.5

© 2001-2023 Discuz! Team.

返回顶部