How to pass variable arguments to functions bound to mouse JS events, tabs [I] .onMouseover = showTab ().

my invalid transmission: tabs [I] .onMouseover = showTab (vtabs, vcontents);


var vtabs = document.getElementsByClassName("tab-head")[0].getElementsByTagName("h2"),
    vcontents = document.getElementsByClassName("tab-content")[0].getElementsByTagName("div");

            function changeTab(tabs, contents) {
                for(var i = 0, len = tabs.length; i < len; iPP) {
                    tabs[i].onmouseover = showTab(vtabs, vcontents);
                   
                }
            }

            function showTab(tabs, contents) {
                for(var i = 0, len = tabs.length; i < len; iPP) {
                    if(tabs[i] === this) {
                        tabs[i].className = "selected";
                        contents[i].className = "show";
                    } else {
                        tabs[i].className = "";
                        contents[i].className = "";
                    }
                }
            }

            changeTab(vtabs, vcontents);

htm Code

<div class="tab-head">
            <h2 class="selected">1</h2>
            <h2>2</h2>
            <h2>3</h2>
        </div>
        <div class="tab-content">
            <div class="show">content1</div>
            <div>content2</div>
            <div>content3</div>
        </div>

css Code

            h2 {
                border-top: solid cornflowerblue 1px;
                border-left: solid cornflowerblue 1px;
                width: 50px;
                height: 25px;
                margin: 0;
                float: left;
                text-align: center;
            }
            
            .tab-content {
                border: solid cornflowerblue 1px;
                width: 152px;
                height: 100px;
            }
            
            .tab-content div{
                display: none;
            }
            
            .selected {
                background-color: cornflowerblue;
            }
            
            .tab-content .show{
                display: block;
            }

How to pass variable arguments to functions bound to mouse JS events, tabs [I] .onMouseover = showTab ().

problem description

the environmental background of the problems and what methods you have tried

related codes

what result do you expect? What is the error message actually seen?