NEWS

新聞資訊

我們不只做網站...

JS實現鼠標經過懸浮切換

發表日期：2021-08-06 文章編輯：洛壹網絡文章來源：網站建設公司

<title>JS實現鼠標經過懸浮切換</title>
    
    <style>
       .Menubox{width: 400px;height: 400px;margin: auto;}
       .Menubox ul li{width: 100px;height: 50px;background-color: #CCCC00;margin-top: 10px;text-align: center;line-height: 50px;}
       .Contentbox div{width: 600px;height: 100px;margin: auto;}
    </style>

<div class="Menubox">
    <ul>
      <li id="one1" onmouseover="setTab('one',1,4)" >新聞1</li>
      <li id="one2" onmouseover="setTab('one',2,4)" class="hover">新聞2</li>
      <li id="one3" onmouseover="setTab('one',3,4)">新聞3</li>
      <li id="one4" onmouseover="setTab('one',4,4)">新聞4</li>
    </ul>
</div>
<div class="Contentbox">
    <div id="con_one_1" style="background:#CCCC00;">新聞列表1</div>
    <div id="con_one_2" style="background:#FFCCCC;display:none">新聞列表2</div>
    <div id="con_one_3" style="background:#CCCCFF;display:none">新聞列表3</div>
    <div id="con_one_4" style="background:#99CC33;display:none">新聞列表4</div>
</div>


</body>

<script>
    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";
        }
    }
    </script>