javascript中字体浮动效果的简单实例演示_javascript技巧

在淘宝，京东等其他网页上我们能够看到，当鼠标移上去的时候，能够使其下面出现其它选项，现在就演示一下这种功能
主要是用到css里面的display，以及鼠标触发的事件onmouseover（），和onmouseout()方式，在加上css样式的设置和标签之间额使用就能实现。
具体如下：
1，为了很好的控制，采用了列表的样式，并且在设置css样式时很方便
2，采用了标签的样式，能够让鼠标移上去对其他的有反应
具体的js函数写的功能：

html部分的代码：

 
    

 
         
        最新新闻 
                

最新新闻内容摘要《机密》1
 
          
最新新闻内容摘要《机密》2
 
          
最新新闻内容摘要《机密》3
 
          
最新新闻内容摘要《机密》4
 
          
最新新闻内容摘要《机密》5
 
        
 
      
 
        新浪新闻 
        

最新新闻内容摘要《机密》1
 
          
最新新闻内容摘要《机密》2
 
          
最新新闻内容摘要《机密》3
 
          
最新新闻内容摘要《机密》4
 
          
最新新闻内容摘要《机密》5
 
        
 
      
 
        社会新闻 
        

最新新闻内容摘要《机密》1
 
          
最新新闻内容摘要《机密》2
 
          
最新新闻内容摘要《机密》3
 
          
最新新闻内容摘要《机密》4
 
          
最新新闻内容摘要《机密》5
 
        
 
      
 
        最新新闻 
        

最新新闻内容摘要《机密》1
 
          
最新新闻内容摘要《机密》2
 
          
最新新闻内容摘要《机密》3
 
          
最新新闻内容摘要《机密》4
 
          
最新新闻内容摘要《机密》5
 
        


 

除了上面很重要css的设置也很重要，如下：

效果图 1：鼠标没有移上去时候

效果图 2 ：

完整代码：

 
 
 
 
    

 
         
        最新新闻 
                

最新新闻内容摘要《机密》1
 
          
最新新闻内容摘要《机密》2
 
          
最新新闻内容摘要《机密》3
 
          
最新新闻内容摘要《机密》4
 
          
最新新闻内容摘要《机密》5
 
        
 
      
 
        新浪新闻 
        

最新新闻内容摘要《机密》1
 
          
最新新闻内容摘要《机密》2
 
          
最新新闻内容摘要《机密》3
 
          
最新新闻内容摘要《机密》4
 
          
最新新闻内容摘要《机密》5
 
        
 
      
 
        社会新闻 
        

最新新闻内容摘要《机密》1
 
          
最新新闻内容摘要《机密》2
 
          
最新新闻内容摘要《机密》3
 
          
最新新闻内容摘要《机密》4
 
          
最新新闻内容摘要《机密》5
 
        
 
      
 
        最新新闻 
        

最新新闻内容摘要《机密》1
 
          
最新新闻内容摘要《机密》2
 
          
最新新闻内容摘要《机密》3
 
          
最新新闻内容摘要《机密》4
 
          
最新新闻内容摘要《机密》5