注册 | 登陆

您的位置：阿里西西 > 网页特效 > 导航菜单 > 详细内容

1顶

鼠标经过显示详细简介的排名菜单

稿源：互联网 2022-04-04 15:56:46 点击： 1987 撤稿纠错

一个鼠标放上去,显示详细内容备注的特效代码

以下讨论的是和伸缩菜单相关的鼠标经过显示详细简介的排名菜单教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<style>
div {font-size:12px;}
ul {list-style:none;}
DL { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px}
DT { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px}
DD { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px}
.l { FLOAT: left}
.r { FLOAT: right}
.cf { CLEAR: both; DISPLAY: block; FONT-SIZE: 1px; LINE-HEIGHT: 1px; HEIGHT: 0px}
.yspace { MARGIN: 10px auto 0px}
.block { }
.btl { DISPLAY: block; FONT-SIZE: 1px; LINE-HEIGHT: 1px; POSITION: relative; HEIGHT: 6px}
.btr { DISPLAY: block; FONT-SIZE: 1px; LINE-HEIGHT: 1px; POSITION: relative; HEIGHT: 6px}
.bbl { DISPLAY: block; FONT-SIZE: 1px; LINE-HEIGHT: 1px; POSITION: relative; HEIGHT: 6px}
.sort1 .txt { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0.4em}
.sort1 .txt ul { PADDING:0;margin:0;}
.sort1 .txt LI { PADDING-RIGHT: 0px; PADDING-LEFT: 28px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; BORDER-BOTTOM: #ddd 1px dashed}
.sort1 .txt LI.listHeight { LINE-HEIGHT: 22px; HEIGHT: 22px}
.sort1 .txt LI.more { PADDING-RIGHT: 10px; BORDER-TOP: #eee 1px solid; PADDING-LEFT: 8px; BACKGROUND: #f8f8f8; PADDING-BOTTOM: 6px; MARGIN: 0px 0px 3px; PADDING-TOP: 8px; BORDER-BOTTOM: #eee 1px solid}
.sort1 .numBig { WIDTH: 20px; HEIGHT: 54px; TEXT-ALIGN: center;background:green;overflow:hidden;}
.sort1 .numBig SPAN { DISPLAY: block; FONT-WEIGHT: bold; FONT-SIZE: 1.2em; WIDTH: 20px; COLOR: #fff; LINE-HEIGHT: 20px; BORDER-BOTTOM: #fff 1px solid; HEIGHT: 20px;text-align:center;margin:0;padding:0;}
.sort1 .productImg { HEIGHT: 52px}
.sort1 .productImg IMG { BORDER-RIGHT: #ccc 1px solid; PADDING-RIGHT: 1px; BORDER-TOP: #ccc 1px solid; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; BORDER-LEFT: #ccc 1px; PADDING-TOP: 1px; BORDER-BOTTOM: #ccc 1px solid}
.sort1 .productInfo H3 { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: normal; FONT-SIZE: 1.1em; PADDING-BOTTOM: 3px; LINE-HEIGHT: 1.1em; PADDING-TOP: 1px}
.sort1 .productInfo P { COLOR: #666; LINE-HEIGHT: 1.4em}
.hotShop {width:200px }
.hotShop .txt { }
.hotShop .txt11 { HEIGHT: 200px}
.hotShop .txt .num1 { BACKGROUND: url(http://www.35.cn/indexstyle1/default/p1.gif) no-repeat 10px 5px}
.hotShop .txt .num2 { BACKGROUND: url(http://www.35.cn/indexstyle1/default/p2.gif) no-repeat 10px 5px}
.hotShop .txt .num3 { BACKGROUND: url(http://www.35.cn/indexstyle1/default/p3.gif) no-repeat 10px 5px}
.hotShop .txt .num4 { BACKGROUND: url(http://www.35.cn/indexstyle1/default/p4.gif) no-repeat 10px 5px}
.hotShop .txt .num5 { BACKGROUND: url(http://www.35.cn/indexstyle1/default/p5.gif) no-repeat 10px 5px}
.hotShop .txt .num6 { BACKGROUND: url(http://www.35.cn/indexstyle1/default/p6.gif) no-repeat 10px 5px}
.hotShop .txt .num7 { BACKGROUND: url(http://www.35.cn/indexstyle1/default/p7.gif) no-repeat 10px 5px}
.hotShop .txt .num8 { BACKGROUND: url(http://www.35.cn/indexstyle1/default/p8.gif) no-repeat 10px 5px}
.hotShop .txt .num9 { BACKGROUND: url(http://www.35.cn/indexstyle1/default/p9.gif) no-repeat 10px 5px}
.hotShop .numBig { BACKGROUND: #ff7800}
.hotShop .numBig SPAN { BACKGROUND: #f30}
.hotShop .productImg { PADDING-LEFT: 0px}
.hotShop .productInfo { PADDING-LEFT: 2px; HEIGHT: 52px}
.hotShop .productInfo H3 { COLOR: #666}
.hotShop .productInfo H3 A:link { COLOR: #f60; TEXT-DECORATION: underline}
.hotShop .productInfo H3 A:visited { COLOR: #f60; TEXT-DECORATION: underline}
.hotShop .productInfo H3 A:hover { COLOR: #000}

</style>
<div class="hotShop sort1 yspace" id=DivShopPaiHang_Food>
  <div class=txt id=DivShopPaiHang_ShowPanel style="HEIGHT: 265px">
          <div class=txt11>
            <ul>
            
              <li class=more id=DivShopPaiHangFlag1_B1 style="DISPLAY: none">
                <p class="numBig l"><span>1</span></p>
                <p class="productImg l"><a title=知味轩民间瓦罐湖滨南店 
  href="http://www.alixixi.com/" target=_blank><img 
  id=Img_DivShopPaiHangFlag1_1 src="http://alixixi.com/skin/2008/ai.gif" height=50 alt=知味轩民间瓦罐湖滨南店 width=50></a></p>
                <div class=productInfo>
                  <h3><a title=知味轩民间瓦罐湖滨南店 href="http://www.alixixi.com/" 
  target=_blank>知味轩民间瓦罐湖滨南..</a></h3>
                  <p>特色菜：民间老汤 木瓜雪蛤 玉米烙 铁板香菜..</p>
                </div>
                <div id=ImgSrc_DivShopPaiHangFlag1_1 
  style="DISPLAY: none">images/01.jpg</div>
                <span 
  class=cf></span></li>
              <li class="num1 listHeight" id=DivShopPaiHangFlag1_S1 
  onMouseOver="SwapPaiHangShopDiv('DivShopPaiHangFlag1','1')"><a 
  title=知味轩民间瓦罐湖滨南店 href="http://www.alixixi.com/" 
  target=_blank>知味轩民间瓦罐湖滨南店</a>
              <li class=more id=DivShopPaiHangFlag1_B2 style="DISPLAY: none">
                <p class="numBig l"><span>2</span></p>
                <p class="productImg l"><a title=九龙塘食府 
  href="http://www.alixixi.com/" target=_blank><img src="http://alixixi.com/skin/2008/ai.gif"  
  id=Img_DivShopPaiHangFlag1_2 height=50 alt=九龙塘食府 width=50></a></p>
                <div class=productInfo>
                  <h3><a title=九龙塘食府 href="http://www.alixixi.com/" 
  target=_blank>九龙塘食府</a></h3>
                  <p>特色菜：野生海虾 土笋冻拼章鱼 花螺苦螺拼盘</p>
                </div>
                
                
                <div id=ImgSrc_DivShopPaiHangFlag1_2 
  style="DISPLAY: none">images/02.jpg</div>
                <span 
  class=cf></span></li>
              <li class="num2 listHeight" id=DivShopPaiHangFlag1_S2 
  onMouseOver="SwapPaiHangShopDiv('DivShopPaiHangFlag1','2')"><a title=九龙塘食府 
  href="http://www.alixixi.com/" target=_blank>九龙塘食府</a>
              <li class=more id=DivShopPaiHangFlag1_B3 style="DISPLAY: none">
                <p class="numBig l"><span>3</span></p>
                <p class="productImg l"><a title=龙厨海鲜食府 
  href="http://www.alixixi.com/" target=_blank><img src="http://alixixi.com/skin/2008/ai.gif"  
  id=Img_DivShopPaiHangFlag1_3 height=50 alt=龙厨海鲜食府 width=50></a></p>
                <div class=productInfo>
                  <h3><a title=龙厨海鲜食府 href="http://www.alixixi.com/" 
  target=_blank>龙厨海鲜食府</a></h3>
                  <p>特色菜：海鲜</p>
                </div>
                <div id=ImgSrc_DivShopPaiHangFlag1_3 
  style="DISPLAY: none">images/03.jpg</div>
                <span 
  class=cf></span></li>
  
  
              <li class="num3 listHeight" id=DivShopPaiHangFlag1_S3 

  onMouseOver="SwapPaiHangShopDiv('DivShopPaiHangFlag1','3')"><a title=龙厨海鲜食府 
  href="http://www.alixixi.com/" target=_blank>龙厨海鲜食府</a>
              <li class=more id=DivShopPaiHangFlag1_B4 style="DISPLAY: none">
                <p class="numBig l"><span>4</span></p>
                <p class="productImg l"><a title=南翔小笼[SM店] 
  href="http://www.alixixi.com/" target=_blank><img src="http://alixixi.com/skin/2008/ai.gif"  
  id=Img_DivShopPaiHangFlag1_4 height=50 alt=南翔小笼[SM店] width=50></a></p>
                <div class=productInfo>
                  <h3><a title=南翔小笼[SM店] href="http://www.alixixi.com/" 
  target=_blank>南翔小笼[SM店]</a></h3>
                  <p>特色菜：小笼馒头</p>
                </div>
                <div id=ImgSrc_DivShopPaiHangFlag1_4 
  style="DISPLAY: none">images/04.jpg</div>
                <span 
  class=cf></span></li>
              <li class="num4 listHeight" id=DivShopPaiHangFlag1_S4 
  onMouseOver="SwapPaiHangShopDiv('DivShopPaiHangFlag1','4')"><a title=南翔小笼[SM店] 
  href="http://www.alixixi.com/" target=_blank>南翔小笼[SM店]</a>
              <li class=more id=DivShopPaiHangFlag1_B5 style="DISPLAY: none">
                <p class="numBig l"><span>5</span></p>
                <p class="productImg l"><a title=喜满客无烟烧烤 
  href="http://www.alixixi.com/" target=_blank><img src="http://alixixi.com/skin/2008/ai.gif"  
  id=Img_DivShopPaiHangFlag1_5 height=50 alt=喜满客无烟烧烤 width=50></a></p>
                <div class=productInfo>
                  <h3><a title=喜满客无烟烧烤 href="http://www.alixixi.com/" 
  target=_blank>喜满客无烟烧烤</a></h3>
                  <p>特色菜：秋刀鱼</p>
                </div>
                <div id=ImgSrc_DivShopPaiHangFlag1_5 
  style="DISPLAY: none">images/05.jpg</div>
                <span 
  class=cf></span></li>
              <li class="num5 listHeight" id=DivShopPaiHangFlag1_S5 
  onMouseOver="SwapPaiHangShopDiv('DivShopPaiHangFlag1','5')"><a title=喜满客无烟烧烤 
  href="http://www.alixixi.com/" target=_blank>喜满客无烟烧烤</a>
              <li class=more id=DivShopPaiHangFlag1_B6 style="DISPLAY: none">
                <p class="numBig l"><span>6</span></p>
                <p class="productImg l"><a title=厦大蔡清洁楼(名苑)咖啡厅 
  href="http://www.alixixi.com/" target=_blank><img src="http://alixixi.com/skin/2008/ai.gif"  
  id=Img_DivShopPaiHangFlag1_6 height=50 alt=厦大蔡清洁楼(名苑)咖啡厅 width=50></a></p>
                <div class=productInfo>
                  <h3><a title=厦大蔡清洁楼(名苑)咖啡厅 href="http://www.alixixi.com/" 
  target=_blank>厦大蔡清洁楼(名苑)..</a></h3>
                  <p>特色菜：茄子牛肉饭 黑椒牛肉饭 金针姑牛肉饭..</p>
                </div>
                <div id=ImgSrc_DivShopPaiHangFlag1_6 
  style="DISPLAY: none">images/06.jpg</div>
                <span 
  class=cf></span></li>
              <li class="num6 listHeight" id=DivShopPaiHangFlag1_S6 
  onMouseOver="SwapPaiHangShopDiv('DivShopPaiHangFlag1','6')"><a 
  title=厦大蔡清洁楼(名苑)咖啡厅 href="http://www.alixixi.com/" 
  target=_blank>厦大蔡清洁楼(名苑)咖啡厅</a>
              <li class=more id=DivShopPaiHangFlag1_B7 style="DISPLAY: none">
                <p class="numBig l"><span>7</span></p>
                <p class="productImg l"><a title=农家佬 
  href="http://www.alixixi.com/" target=_blank><img src="http://alixixi.com/skin/2008/ai.gif"  
  id=Img_DivShopPaiHangFlag1_7 height=50 alt=农家佬 width=50></a></p>
                <div class=productInfo>
                  <h3><a title=农家佬 href="http://www.alixixi.com/" 
  target=_blank>农家佬</a></h3>
                  <p>特色菜：野菜小肠汤</p>
                </div>
                <div id=ImgSrc_DivShopPaiHangFlag1_7 
  style="DISPLAY: none">images/07.jpg</div>
                <span 
  class=cf></span></li>
              <li class="num7 listHeight" id=DivShopPaiHangFlag1_S7 
  onMouseOver="SwapPaiHangShopDiv('DivShopPaiHangFlag1','7')"><a title=农家佬 
  href="http://www.alixixi.com/" target=_blank>农家佬</a>
              <li class=more id=DivShopPaiHangFlag1_B8 style="DISPLAY: none">
                <p class="numBig l"><span>8</span></p>
                <p class="productImg l"><a title=福宁阁酒楼 
  href="http://www.alixixi.com/" target=_blank><img src="http://alixixi.com/skin/2008/ai.gif"  
  id=Img_DivShopPaiHangFlag1_8 height=50 alt=福宁阁酒楼 width=50></a></p>
                <div class=productInfo>
                  <h3><a title=福宁阁酒楼 href="http://www.alixixi.com/" 
  target=_blank>福宁阁酒楼</a></h3>
                  <p>特色菜：农家菜</p>
                </div>
                <div id=ImgSrc_DivShopPaiHangFlag1_8 
  style="DISPLAY: none">images/08.jpg</div>
                <span 
  class=cf></span></li>
              <li class="num8 listHeight" id=DivShopPaiHangFlag1_S8 
  onMouseOver="SwapPaiHangShopDiv('DivShopPaiHangFlag1','8')"><a title=福宁阁酒楼 
  href="http://www.alixixi.com/" target=_blank>福宁阁酒楼</a>
              <li class=more id=DivShopPaiHangFlag1_B9 style="DISPLAY: none">
                <p class="numBig l"><span>9</span></p>
                <p class="productImg l"><a title=向阳坊[同安二店] 
  href="http://www.alixixi.com/" target=_blank><img src="http://alixixi.com/skin/2008/ai.gif"  
  id=Img_DivShopPaiHangFlag1_9 height=50 alt=向阳坊[同安二店] width=50></a></p>
                <div class=productInfo>
                  <h3><a title=向阳坊[同安二店] href="http://www.alixixi.com/" 
  target=_blank>向阳坊[同安二店]</a></h3>
                  <p>特色菜：西式蛋糕</p>
                </div>
                <div id=ImgSrc_DivShopPaiHangFlag1_9 
  style="DISPLAY: none">images/09.jpg</div>
                <span 
  class=cf></span></li>
              <li class="num9 listHeight" id=DivShopPaiHangFlag1_S9 
  onMouseOver="SwapPaiHangShopDiv('DivShopPaiHangFlag1','9')"><a title=向阳坊[同安二店] 
  href="http://www.alixixi.com/" target=_blank>向阳坊[同安二店]</a> </li>
            </ul>
          </div>
        </div>
      </div>

<SCRIPT type=text/javascript>
_gObjByID = function(id) {
 return document.getElementById(id);
}
function ShowImg(ImgId,ImgSrc)
{//alert(_gObjByID(ImgId).src);
    if(_gObjByID(ImgId).src=="")
    {
        _gObjByID(ImgId).src=_gObjByID(ImgSrc).innerHTML;
    }    
}
function SwapPaiHangShopDiv(DivKey,ID)
{//DivS1  DivB1
    for(var i=1;i<=9;i++)
       {
                   _gObjByID(DivKey + '_S' + i).style.display='';
                   _gObjByID(DivKey + '_B' + i).style.display='none';                        
        }
            _gObjByID(DivKey + '_S' + ID).style.display='none';              
            _gObjByID(DivKey + '_B' + ID).style.display='';
     ShowImg("Img_"+DivKey+"_"+ID,"ImgSrc_"+DivKey+"_"+ID);
}

if(9>=1){
SwapPaiHangShopDiv('DivShopPaiHangFlag1','1');
}
</SCRIPT>

关于鼠标经过显示详细简介的排名菜单的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/200904294.shtml方便下次再访问哦。

·上一篇： 一款纯CSS打造的竖向导航菜单
·下一篇： 始终在页面底部的菜单

相关阅读

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

最新游戏

更多 »

最新新闻

更多 »