Simple examples of font floating effects in JavaScript demo _javascript tips

In Taobao, Jingdong and other web pages we can see, when the mouse moved up, can make it appear below other options, now demonstrate this function
The main is to use the display inside the CSS, as well as the mouse triggered events onmouseover (), and onmouseout (), in addition to the CSS style settings and the amount of use between tags can be achieved.
Specifically as follows:
1, for good control, the use of a list of styles, and when the CSS style is easy to set
2, the use of the <a> tag style, to allow the mouse to move up to the other reaction
specific JS function to write the function:

<script type= "Text/javascript" > 
    function open1 (node) { 
      var node1=node; 
      var nodes=node1.getelementsbytagname ("ul") [0]; 
      With (Nodes.style) { 
        display= (display== "block")? ' None ': ' Block '; 
      } 
    } 

Code for the HTML section:

<div id= "News" > <ul id= "newsid1" > <li onmouseover= "open1 (This)"; Onmouseout= "Open1 (This)" > <!--<a href= "javascript:void (0)" onmouseover= "Open1 (This)"; Onmouseout= "Open1 (This)" > Latest news </a> here, move the first one will disappear, not be able to click on the following--> <a href= "javascript:void (0)" > Latest new Smell </a> <ul><!--so packaged in order to better encapsulate the contents of the following, then the mouse to move the above, you can operate on the following--> <li><a HRE f= "http://www.baidu.com" > Latest News Content Summary "Confidential" 1</a></li> <li><a href= "http://www.baidu.com" > The most New news Content Summary "Confidential" 2</a></li> <li><a href= "http://www.baidu.com" > Latest News Content Summary "Confidential" 3</a></li > <li><a href= "http://www.baidu.com" > Latest News Content Summary "Confidential" 4</a></li> <li>&lt  A href= "http://www.baidu.com" > Latest News Content Summary "Confidential" 5</a></li> </ul> </li> <li Onmouseover= "Open1 (This)"; Onmouseout= "Open1 (This)" > <a href= "javascript:void (0)" onclick= "" > Sina news </a> <ul> <li><a href= "HTTP://WWW.J B51.net "> Latest News Content Summary" Confidential "1</a></li> <li><a href=" http://www.jb51.net "> Latest News Content Summary" Confidential "2</ a></li> <li><a href= "http://www.jb51.net" > Latest News Content Summary "Confidential" 3</a></li> &L T;li><a href= "Http://www.jb51.net" > Latest News Content Summary "Confidential" 4</a></li> <li><a href= "http://www" . jb51.net "> Latest News Content Summary" Confidential "5</a></li> </ul> </li> <li onmouseover=" Open1 ( This) "; 
          Onmouseout= "Open1 (This)" > <a href= "javascript:void (0)" onclick= "" > Social news </a> <ul> <li><a href= "Http://www.jb51.net" > Latest News Content Summary "Confidential" 1</a></li> <li><a href= " Http://www.jb51.net "> Latest News Content Summary" Confidential "2</a></li> <li><a href=" http://www.jb51.net "> Latest news content "Confidential" 3</a></li> <li><a href= "http://www.jb51.net" > Latest News Content Summary "Confidential" 4</a></li> <li 
      ><a href= "Http://www.jb51.net" > Latest News Content Summary "Confidential" 5</a></li> </ul> </li> <li onmouseover= "Open1 (This)"; 
           Onmouseout= "Open1 (This)" > <a href= "javascript:void (0)" onclick= "" > Latest news </a> <ul> <li><a href= "Http://www.jb51.net" > Latest News Content Summary "Confidential" 1</a></li> <li><a href= "Http://www.jb51.net" > Latest News Content Summary "Confidential" 2</a></li> <li><a href= "http://www.jb51.net" > Latest News 
          Volume summary "Confidential" 3</a></li> <li><a href= "http://www.jb51.net" > Latest News Content Summary "Confidential" 4</a></li> <li><a href= "Http://www.jb51.net" > Latest News Content Summary "Confidential" 5</a></li> </ul> &L  T;/li></ul></div>

In addition to the above very important CSS settings are also important, as follows:

<style type= "Text/css" > 
    #newsid1 { 
      list-style:none; 
    } 
    #newsid1 Li ul{ 
      list-style:none; 
      margin:0px; 
      padding:0px; 
    } 
    #newsid1 li{ 
      float:left;/* to show it side- 
      width:220px; 
      Text-align:center; 
      Background-color: #80ff00; 
      /* Set width so that each column is shown on average 
    /} #newsid1 li a{ 
      color: #8080ff; 
      text-decoration:none;/* let the hyperlink below no horizontal line * * * 
      text-align:center; 
      line-height:30px; 
       
    } 
    #newsid1 Li a:hover{ 
      /*a:hover moved up with the specific color and background color of the reaction settings/color 
      : #400080; 
      Background-color: #ffffff; 
    } 
    #newsid1 Li ul li{ 
      line-height:30px; 
      Color: #ff8040; 
      Background-color: #808000;; 
    } 
    #newsid1 Li ul{ 
      display:none;/* The default must be all hidden, and then set the Dispaly:block after the mouse is moved to the trigger time; 
*/ 
    } 
  

Effect Figure 1: The mouse did not move up the time

Effect Figure 2:

Complete code:

<! DOCTYPE html>