应用伪类代替js展现文本更替的效果

用伪类hover创建鼠标移入文本内容发生改变的效果,其实就是在一个div里面创建两个文本，刚开始一个文本隐藏一个展现，当鼠标移入的时候把隐藏的文本展现出来，把刚开始展现出来的文本隐藏起来，从而达到更替文本的效果，当鼠标移出，恢复原来的状态。此效果也可JS实现，但用伪类更方便一些，代码如下：

.CSSdohua{
        width:200px; height :200px; background:#00ffff; margin:auto;
      }
     .CSSdohua:hover ul:nth-of-type(1){
    display:none;
}
.CSSdohua:hover ul:nth-of-type(2){
    display:block;
    }

   ul:nth-of-type(2){
       display:none;     
   }
     ul{
         height:200px; width:200px; border:1px solid #00ff21; background:#00ffff;
     }
     li{ list-style: none;  padding: 30px 0px 0px 6px; }
    </style>
    <div class="quaju">
        <div class="CSSdohua">   
            <ul>
                <li>刚开始我展现 </li><li>鼠标移入我隐藏 </li><li>鼠标移出我展现</li>
            </ul>       
            <ul>
               <li>刚开始我隐藏</li><li>鼠标移入我展现 </li><li>鼠标移出我隐藏</li>           </ul>
        </div>
    </div>