实用：实现鼠标悬停显示不同的页面（转）

来源：互联网发布：linux kill 命令详解编辑：程序博客网时间：2024/06/05 15:53

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

当鼠标按顺序悬停在菜单上时，可在同一位置显示不同的页面

作者：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添加表格，. 其他浏览器不会用到表格，而将正常使用无序列表。文档类型声明是必须要加的，反之不能正常工作。

运行代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title> stu nicholls | CSS PLaY | cross browser tabbed pages with embeded links</title>

body {text-align:center; font-family:verdana, arial, sans-serif; font-size:76%; color:#000; background:#fff url(back.gif) repeat-x; padding:0; border:0; margin:0;}

</style>

<!--[if lte IE 6]>

<![endif]-->

<!--[if lte IE 6]>

<style>

#ads {display:none;}

#smallads {display:none;}

#adsie {clear:both; text-align:center; width:750px; margin-top:10px;}

#smalladsie {clear:both; text-align:center; width:468px; margin-top:10px;}

</style>

<![endif]-->

</head>

<body>

<ul>

<li><a class="hide" href="#nogo">John Constable</a>

<!--[if lte IE 6]>

<a href="../menu/index.html">John Constable

<![endif]-->

<ul>

<li>

<p>Although he showed an early talent for art and began painting his native Suffolk scenery before he left school, his great originality matured slowly.</p>

<p>He committed himself to a career as an artist only in 1799, when he joined the Royal Academy Schools and it was not until 1829 that he was grudgingly made a full Academician, elected by a majority of only one vote.</p>

<p>In 1816 he became financially secure on the death of his father and married Maria Bicknell after a seven-year courtship and in the fact of strong opposition from her family. During the 1820s he began to win recognition: The Hay Wain (National Gallery, London, 1821) won a gold medal at the Paris Salon of 1824 and Constable was admired by <a href="http://www.ibiblio.org/wm/paint/auth/delacroix/">Delacroix</a> and Bonington among others.</p>

<p>His wife died in 1828, however, and the remaining years of his life were clouded by despondency.</p>

<p>This text is an excerpt from <a href="http://www.ibiblio.org/wm/paint/auth/constable/">The WebMuseum, Paris</a></p>

</li>

</ul>

<!--[if lte IE 6]>

</td></tr></table>

</a>

<![endif]-->

</li>

<li><a class="hide" href="#nogo">Claude Monet</a>

<!--[if lte IE 6]>

<a href="#nogo">Claude Monet

<![endif]-->

<ul>

<li>

<p>His youth was spent in Le Havre, where he first excelled as a caricaturist but was then converted to landscape painting by his early mentor <a href="http://www.ibiblio.org/wm/paint/auth/boudin/">Boudin</a>, from whom he derived his firm predilection for painting out of doors.</p>

<p>In 1859 he studied in Paris at the Atelier Suisse and formed a friendship with <a href="http://www.ibiblio.org/wm/paint/auth/pissarro/">Pissarro</a>. After two years' military service in Algiers, he returned to Le Havre and met <a href="http://www.ibiblio.org/wm/paint/auth/jongkind/">Jongkind</a>, to whom he said he owed `the definitive education of my eye'.</p>

<p>He then, in 1862, entered the studio of Gleyre in Paris and there met Renoir, Sisley, and Bazille, with whom he was to form the nucleus of the Impressionist group.</p>

<p>Monet's devotion to painting out of doors is illustrated by the famous story concerning one of his most ambitious early works, Women in the Garden (Musée d'Orsay, Paris; 1866-67). The picture is about 2.5 meters high and to enable him to paint all of it outside he had a trench dug in the garden so that the canvas could be raised or lowered by pulleys to the height he required.</p>

<p><a href="http://www.ibiblio.org/wm/paint/auth/courbet/">Courbet</a> visited him when he was working on it and said Monet would not paint even the leaves in the background unless the lighting conditions were exactly right.</p>

<p>This text is an excerpt from <a href="http://www.ibiblio.org/wm/paint/auth/monet/">The WebMuseum, Paris</a></p>

</li>

</ul>

<!--[if lte IE 6]>

</td></tr></table>

</a>

<![endif]-->

</li>

<li><a class="hide" href="#nogo">Vincent Van Gogh</a>

<!--[if lte IE 6]>

<a href="../layouts/index.html">Vincent Van Gogh

<![endif]-->

<ul>

<li>

<p>Gogh, Vincent (Willem) van (b. March 30, 1853, Zundert, Neth.--d. July 29, 1890, Auvers-sur-Oise, near Paris), generally considered the greatest Dutch painter and draughtsman after <a href="http://www.ibiblio.org/wm/paint/auth/rembrandt/">Rembrandt</a>.</p>

<p>With <a href="http://www.ibiblio.org/wm/paint/auth/cezanne/">Cézanne</a> and <a href="http://www.ibiblio.org/wm/paint/auth/gauguin/">Gauguin</a> the greatest of Post-Impressionist artists. He powerfully influenced the current of <a href="http://www.ibiblio.org/wm/paint/glo/expressionism/">Expressionism</a> in modern art. His work, all of it produced during a period of only 10 years, hauntingly conveys through its striking colour, coarse brushwork, and contoured forms the anguish of a mental illness that eventually resulted in suicide. Among his masterpieces are numerous self-portraits and the well-known <a href="http://www.ibiblio.org/wm/paint/auth/gogh/starry-night/">The Starry Night</a> (1889).</p>

<p>This text is an excerpt from <a href="http://www.ibiblio.org/wm/paint/auth/gogh/">The WebMuseum, Paris</a></p>

</li>

</ul>

<!--[if lte IE 6]>

</td></tr></table>

</a>

<![endif]-->

</li>

</ul>

</div>

</body>

</html>
     </div>
   <div class="dede_pages">
    <ul class="pagelist">
                    <li><a>共3页: </a></li><li><a href='33953.html'>上一页</a></li><li><a href='33953.html'>1</a></li><li class="thisclass"><a href='#'>2</a></li><li><a href='33953_3.html'>3</a></li><li><a href='33953_3.html'>下一页</a></li>
    </ul>
   </div>

   <div class="boxoff">
    <strong>------分隔线----------------------------</strong>
   </div>

<div class="handle">
    <div class="context">
     <ul>
      <li>上一篇：<a href='/info/html/wangyezhizuo/Javascript/20080224/33949.html'>JavaScript经典效果集锦（三）</a> </li>
      <li>下一篇：<a href='/info/html/wangyezhizuo/Javascript/20080224/33956.html'>简单实用技巧之网页表格特效</a> </li>
     </ul>
    </div>
    <div class="actbox">
     <ul>
       <li id="act-pnt"><a href="#" onClick="window.print();">打印</a></li>
     </ul>
    </div>
   </div>

<div class="picnews">
      <dl class="tbox">
        <dt><strong>相关文章</strong></dt>
        <dd>
                  <ul class="d1 ico3">

<li class="date" style="height:26px"><a href='/info/html/wangyezhizuo/Javascript/20080224/33361.html'>漂浮广告代码完全解析</a></li>
<li class="date" style="height:26px"><a href='/info/html/wangyezhizuo/Javascript/20080224/34069.html'>破解网页鼠标右键被禁用的最新方法</a></li>
<li class="date" style="height:26px"><a href='/info/html/wangyezhizuo/Javascript/20080224/34045.html'>（Javascript）prototype的一个优势也是缺点</a></li>
<li class="date" style="height:26px"><a href='/info/html/wangyezhizuo/Javascript/20080224/32765.html'>VBScript基础教程之二在HTML页面中添加VBscript代码</a></li>
<li class="date" style="height:26px"><a href='/info/html/wangyezhizuo/Javascript/20080224/32650.html'>各种网页播放器代码大全</a></li>
<li class="date" style="height:26px"><a href='/info/html/wangyezhizuo/Javascript/20080224/33101.html'>JavaScript实际应用：innerHTMl和确认提示的使用</a></li>
<li class="date" style="height:26px"><a href='/info/html/wangyezhizuo/Javascript/20080224/34598.html'>javascript通过调用doPostBack回传页面</a></li>
<li class="date" style="height:26px"><a href='/info/html/wangyezhizuo/Javascript/20080224/32965.html'>常用的Javascript函数</a></li>
<li class="date" style="height:26px"><a href='/info/html/wangyezhizuo/Javascript/20080224/34010.html'>JS特效-N级的联动Select下拉框</a></li>
<li class="date" style="height:26px"><a href='/info/html/wangyezhizuo/Javascript/20080224/33345.html'>JavaScript模拟ACDSEE简单功能</a></li>

                    </ul>
        </dd>
      </dl>
    </div>
            
  </div>
</div>

<div class="footer w960 center mt1 clear">

<p class="powered">
  Powered by <strong>ABC188<span>.COM</span></strong> © 2004-2009 All Rights Reserved. </p>

<p class="copyright">
  站长资讯中心-互联网最全面，最专业的行业资讯网站！<br />蜀ICP备05000045号
</p>
</div>

</body>
</html>