CSS常见问题及解决（二）在active状态下屏蔽掉css中的hover效果

描述：ul中的每一个li都有hover效果（css中完成），但是在点击后（即active的class状态下），要屏蔽hover的效果

解决：li在active状态下屏蔽hover效果 在为li设置hover状态时，不要单纯的写li：hover，应该给所有的li一个hover类名（hover只是为了引申，当然可以取别的名字），当设置为active状态时，移除hover类

<li class="">

  
  

   
   

  
  
    <div class="authorName">

  
  

   
   

  
  
        <a class="nameText hover">Agustín G. Martinelli</a>

  
  

   
   

  
  
        <a class="email"><img src="img/icon/email.png"/></a>

  
  

   
   

  
  
    </div>

  
  

   
   

  
  
</li>

  
  

   
   

  
  
$('#topAuthor li').delegate('a', 'click', function () {

  
  

   
   

  
  
                    //删除之前的active框

  
  

   
   

  
  
  
  

   
                   
   
   $
   
   (
   
   this
   
   ).
   
   parent
   
   ().
   
   parent
   
   (
   
   'li'
   
   ).
   
   siblings
   
   ().
   
   removeClass
   
   (
   
   'active'
   
   );
  
  
  
  

   
   

  
  
                    //设置该标签的爷爷标签（即包含了作者名称和邮件图标的父元素）状态为active

  
  

   
   

  
  
                    $(this).parent().parent('li').addClass('active');

  
  

   
   

  
  
                    //删除hover效果
   
   

    
    

     
     

      
      

       
       $(
       
       '.nameText').
       
       addClass(
       
       'hover');
      
      
     
     
    
    
   
   
   
   

    
    

     
     

      
      

       
       $(
       
       this).
       
       removeClass(
       
       'hover');
      
      
     
     
    
    
   
   
});