鼠标移动到DIV上弹出式列表特效

1、新建html文档。

2、准备好需要用到的图标。

3、书写hmtl代码。

<div id="box-aaa"> <A id=feature-trigger><SPAN class=first>

  <H4 class=c_blue>成功故事</H4>

  帮助客户实现商业成功，才是我们真正的成功。分享华为与全球客户合作双赢的成功故事。

  </SPAN><img src="images/hw_103177.jpg"> </A>

  <div id="feature-popup">

    <div class="maskContainer">

      <div class="mask">

        <div class="caseContainer">

          <div class=case>

            <div class=item>

              <div class=pic><img  src="images/hw_103167.jpg"></div>

              <div class=detail> <A href="#">Telenor：LTE北上极地</A> Telenor在世界最北端的城市朗伊尔城部署LTE网络，为Telenor的百年华诞送上了一份珍贵的贺礼。 </div>

            </div>

            <div class=item>

              <div class=pic><img  src="images/hw_103168.jpg"></div>

              <div class=detail> <A href="#">上海电信IPTV成功之路</A> 上海电信在上海拥有400万宽带用户，超过三分之一的用户选择了IPTV业务。成绩令人瞩目。 </div>

            </div>

            <div class=item>

              <div class=pic><img src="images/hw_103195.jpg"></div>

              <div class=detail> <A href="#">罗马尼亚电信建高效FTTx</A> 通过利用现有资源，选择适合自己的FTTx建网模式，罗马尼亚电信成功打开通向超宽带的大门。 </div>

            </div>

            <div class=item>

              <div class=pic><img src="images/hw_103170.jpg"></div>

              <div class=detail> <A href="#">卡塔尔电信：“光”彩夺目</A> 覆盖全境的国家宽带项目作为卡塔尔国家发展战略的关键举措，对提升国家形象起着举足轻重的作用。 </div>

            </div>

            <div class=item>

              <div class=pic><img src="images/hw_103171.jpg"></div>

              <div class=detail> <A href="#">智利Movistar深挖带宽潜力</A> 智利Movistar基于现有网络资源，最大化提升带宽能力，为用户提供更多丰富多彩的超宽带业务。 </div>

            </div>

            <div class=item>

              <div class=pic><img src="images/hw_103172.jpg"></div>

              <div class=detail> <A href="#">瑞士电信光铜并进</A> 瑞士电信光铜并进，为城市和乡村提供宽带，使瑞士成为“人人都能享有宽带接入”的先行国家之一。 </div>

            </div>

            <div class="close"> <a href="#">更多成功故事</a> </div>

          </div>

        </div>

      </div>

    </div>

  </div>

</div> 

4、书写css代码。

#{ margin: 0; padding: 0; border: 0; }

ul, ol, li { list-style: none; }

input, button { margin: 0; font-size: 12px; vertical-align: middle; }

body { font-size: 12px; font-family: Arial, Helvetica, sans-serif; text-align: center; margin: 0 auto; }

table { border-collapse: collapse; border-spacing: 0; }

a { color: #333; text-decoration: none; }

a:hover { color: #ef9b11; text-decoration: underline; }

em { font-style: normal; }

#box-aaa { text-align: left; border: 1px solid #ccc; padding-left: 80px; padding-top: 350px; height: 270px; width: 900px; margin: 20px auto; }

.caseContainer { width: 664px; height: 405px; position: relative; overflow: hidden; }

.maskContainer { width: 664px; height: 405px; position: relative; bottom: 2px; left: -3px; overflow: hidden; }

#feature-trigger { background: url(../images/hw_089235.png) repeat-x scroll 0 0 transparent; cursor: pointer; display: inline-block; float: left; height: 137px; margin: 12px 12px 0 0; padding: 0; width: 316px; }

#feature-trigger span.first { background: url(../images/hw_089243.png) no-repeat left bottom; }

#box-aaa a span { PADDING-RIGHT: 10px; PADDING-LEFT: 10px; FLOAT: left; PADDING-BOTTOM: 15px; OVERFLOW: hidden; WIDTH: 185px; PADDING-TOP: 13px; HEIGHT: 107px }

#box-aaa a IMG { FLOAT: right; WIDTH: 110px; HEIGHT: 137px }

#box-aaa a SPAN H4 { FONT-WEIGHT: 400; FONT-SIZE: 16px; MARGIN-BOTTOM: 8px; LINE-HEIGHT: 22px; FONT-FAMILY: microsoft yahei }

#box-aaa a SPAN P { FONT-SIZE: 12px; COLOR: #646464; LINE-HEIGHT: 18px }

#feature-popup { DISPLAY: none; Z-INDEX: 100; POSITION: absolute }

.mask { WIDTH: 654px; POSITION: absolute; HEIGHT: 375px }

.case { Z-INDEX: 100; WIDTH: 654px; POSITION: absolute; HEIGHT: 375px; border: 1px solid #ccc; background: #f5f5f5; PADDING-BOTTOM: 0px; OVERFLOW: hidden; PADDING-TOP: 15px; }

.close { CLEAR: both; PADDING-RIGHT: 23px; HEIGHT: 24px; TEXT-ALIGN: right }

.close A { PADDING-RIGHT: 0px; PADDING-LEFT: 20px; FONT-SIZE: 14px; PADDING-BOTTOM: 0px; COLOR: #0033cc; PADDING-TOP: 2px; TEXT-DECORATION: none }

.item { FLOAT: left; MARGIN: 0px 10px 16px 15px; WIDTH: 272px; HEIGHT: 93px; overflow: hidden; }

.pic { BORDER-RIGHT: #b1b3b5 1px solid; BORDER-TOP: #b1b3b5 1px solid; FLOAT: left; BORDER-LEFT: #b1b3b5 1px solid; WIDTH: 88px; MARGIN-RIGHT: 10px; BORDER-BOTTOM: #b1b3b5 1px solid; HEIGHT: 88px }

.item .pic img { WIDTH: 88px; HEIGHT: 88px }

.item .detail { LINE-HEIGHT: 18px }

.item .detail span { FONT-SIZE: 16px; COLOR: #b60005 }

.item .detail a { DISPLAY: block; FONT-WEIGHT: bold; FONT-SIZE: 12px; MARGIN-BOTTOM: 5px; COLOR: #ed9203 }

.item .detail img { DISPLAY: block; MARGIN: 3px 0px 5px }

5、书写并添加js代码。

<SCRIPT src="js/jquery.js"></SCRIPT>

<SCRIPT>

$(function(){featurePopup.ini();});

var indexSlides={};

</SCRIPT>

6、代码整体结构。

7、查看效果。