注册 | 登陆

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

2顶

鼠标经过显示详细信息

稿源：互联网 2022-04-09 23:17:52 点击： 5627 撤稿纠错

鼠标经过后伸展显示详细简介的排名菜单效果，网页很常用的。

以下讨论的是和特效相关的鼠标经过显示详细信息教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

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

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

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

·上一篇： 常用的JS后台导航菜单
·下一篇： 很不错的一款日期输入控件

相关阅读

文章分类LIST >>返回首页

排行总榜

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

最新游戏

更多 »

最新新闻

更多 »