这种a:hover怎么弄？

onmouseover
<style type="text/css">
body,td,th {
 font-size: 12px;
}
.li1{
float:left;width:150px; display:block;  padding:5px; border-right:1px solid #000000; border-bottom:1px solid #000000
}
.li2{
float:left;width:150px; display:block;  padding:5px; border-right:1px solid #000000;  background-color:#FFFFCC;
}</style>
<script>
function ff(e){
var ul  = document.getElementById("ul")
var div = document.getElementById("div")
for(var i=0;i<ul.getElementsByTagName("li").length;i++)
  {
  if(ul.getElementsByTagName("li")[i]==e)
      {
   ul.getElementsByTagName("li")[i].className="li2"
   div.getElementsByTagName("div")[i].style.display=""
   }
  else
   {
   ul.getElementsByTagName("li")[i].className="li1"
   div.getElementsByTagName("div")[i].style.display="none"
   }
   }}
</script>
<div style=" width:602px; height:400px; border:1px solid #000000; padding:0px;">
<div style="width:100%">
<ul id="ul" style=" list-style:none; padding:0px;margin:0px;">
<li onmouseover="ff(this)" class="li2">1231231</li>
<li onmouseover="ff(this)" class="li1">234</li>
<li onmouseover="ff(this)" class="li1">456</li>
<li onmouseover="ff(this)" class="li1" style="border-right:none">678</li>
</ul>
</div><div id="div" style="width:100%; height:100%">
<div style="height:100%;background-color:#FFFFCC; ">你是猪</div>
<div style="height:100%;background-color:#FFFFCC; display:none">你是牛</div>
<div style="height:100%;background-color:#FFFFCC; display:none">你是蜘蛛</div>
<div style="height:100%;background-color:#FFFFCC; display:none">你是奇美拉</div>
</div>
</div>

解决方案 »

  1.   

    2楼的很好用..........谢谢了不过在firefox里显示就乱了.......怎么办
      

  2.   

    选项卡可以用 Dreamweaver CS3 里的spry 插件来做
      

  3.   

    <style type="text/css">
    body,td,th {
     font-size: 12px;
    }
    .a{margin:0px; width:644px !important;width:602px; height:400px; border:1px solid #000000; padding:0px;}
    .li1{
    float:left;width:150px; display:block;  padding:5px; border-right:1px solid #000000; border-bottom:1px solid #000000;background-color:#FFFFFF;
    }
    .li2{
    float:left;width:150px; display:block;  padding:5px; border-right:1px solid #000000;  background-color:#FFFFCC;
    }</style>
    <script>
    function ff(e){
    var ul  = document.getElementById("ul")
    var div = document.getElementById("div")
    for(var i=0;i<ul.getElementsByTagName("li").length;i++)
      {
      if(ul.getElementsByTagName("li")[i]==e)
          {
       ul.getElementsByTagName("li")[i].className="li2"
       div.getElementsByTagName("div")[i].style.display=""
       }
      else
       {
       ul.getElementsByTagName("li")[i].className="li1"
       div.getElementsByTagName("div")[i].style.display="none"
       }
       }}
    </script><body style=" margin:0px">
    <div class="a">
    <div style="width:100%;margin:0px;">
    <ul id="ul" style=" list-style:none; padding:0px;margin:0px;">
    <li onMouseOver="ff(this)" class="li2">1231231</li>
    <li onMouseOver="ff(this)" class="li1">234</li>
    <li onMouseOver="ff(this)" class="li1">456</li>
    <li onMouseOver="ff(this)" class="li1" style="border-right:none">678</li>
    </ul>
    </div><div id="div" style="width:100%; height:100%">
    <div style="height:100%;background-color:#FFFFCC; "><br><br><br>你是猪</div>
    <div style="height:100%;background-color:#FFFFCC; display:none"><br><br><br>你是牛</div>
    <div style="height:100%;background-color:#FFFFCC; display:none"><br><br><br>你是蜘蛛</div>
    <div style="height:100%; width:100%; background-color:#FFFFCC; display:none; text-align:left"><br><br><br>123</div>
    </div>
    </div>
    <body>
    最后一个选象卡有点问题
    象我样+3个<br>按时就不会出问题
    问题正在研究中.....