javascript - 关于用js制作选项卡问题。

Question

我想鼠标hover的时候选项卡黑字变颜色，在css加了.hover为什么没有效果呢，感觉我的思路没错呀，谢谢！

 <p class="indextableft">
<p class="laws">
      <ul>
        <li style="border-left:5px solid #3f86c8; height:25px; float:left; " id="tabthreeb1" onMouseOver="setTab('tabthreeb',1,3)" class="hover" ><a href="#">政策法规</a></li>
        <li id="tabthreeb2" onMouseOver="setTab('tabthreeb',2,3)"class=""><a href="article-list-6-duiwujianshe.html" ><a href="#">办案指南</a></li>
        <li id="tabthreeb3" onMouseOver="setTab('tabthreeb',3,3)" class=""><a href="#">工作研讨</a></li>
      </ul>
  </p><!-------------laws---------------->    
   
   
  <p id="con_tabthreeb_1" >
            <ul class="ul">
                <li>
                    <a href="#">中央办公厅国务院印发《关于进一步深化文化市场综合执法改革的实施意见》将在明天正式实施</a>
                 </li>  
                    
                 <li>
                    <a href="#">中央办公厅国务院印发《关于进一步深化文化市场综合执法改革的实施意见》将在明天正式实施</a>
                </li>
                 
                <li>
                    <a href="#">中央办公厅国务院印发《关于进一步深化文化市场综合执法改革的实施意见》将在明天正式实施</a>
                </li> 
                
                <li>
                    <a href="#">中央办公厅国务院印发《关于进一步深化文化市场综合执法改革的实施意见》将在明天正式实施</a>
                </li> 
                
                  
            </ul> 
     </p>               
         
   <p id="con_tabthreeb_2" style="display:none">
            <ul class="ul">
                <li>
                    <a href="#">中央办公厅国务院印发《关于进一步深化文化市场综合执法改革的实施意见》将在明天正式实</a>
                 </li>  
                    
                 <li>
                    <a href="#">中央办公厅国务院印发《关于进一步深化文化市场综合执法改革的实施意见》将在明天正式实施</a>
                </li>
                 
                <li>
                    <a href="#">中央办公厅国务院印发《关于进一步深化文化市场综合执法改革的实施意见》将在明天正式实施</a>
                </li> 
                
                <li>
                    <a href="#">中央办公厅国务院印发《关于进一步深化文化市场综合执法改革的实施意见》将在明天正式实施</a>
                </li> 
                
                  
            </ul> 
     </p>             
  
  <p id="con_tabthreeb_3" style="display:none">
            <ul class="ul">
                <li>
                    <a href="#">中央办公厅国务院印发《关于进一步深化文化市场综合执法改革的实施意见》将在明天正式实施</a>
                 </li>  
                    
                 <li>
                    <a href="#">中央办公厅国务院印发《关于进一步深化文化市场综合执法改革的实施意见》将在明天正式实施</a>
                </li>
                 
                <li>
                    <a href="#">中央办公厅国务院印发《关于进一步深化文化市场综合执法改革的实施意见》将在明天正式实施</a>
                </li> 
                
                <li>
                    <a href="#">中央办公厅国务院印发《关于进一步深化文化市场综合执法改革的实施意见》将在明天正式实施</a>
                </li> 
                
             </ul>      
            
     </p> 

js

 function setTab(name,cursel,n){
for(i=1;i<=n;i++){
    var menu=document.getElementById(name+i);
    var con=document.getElementById("con_"+name+"_"+i);
    menu.className=i==cursel?"hover":"";
    con.style.display=i==cursel?"block":"none";
}
 }

 

Answer 1

你的css加上这一句.laws li a:hover{color:#eee;}你的选项卡在鼠标经过的时候就可以改变颜色了.
:hover相关知识点在这http://www.runoob.com/cssref/sel-hover.html

Answer 2

css的伪类不是说你把class名字起成hover,用:hover

Answer 3

这种情况·建议使用CSS来控制，否则你得用hover(fn,fn)来添加和移除class