为什么我这样改用的js没有实现?

原css代码

#dropdown:hover #dropdown-list {
    display: block;
}

我该用的原生JS代码

var onMainbtn0 = document.getElementById("dropdown-dropbtn0");
var onMainbtn1 = document.getElementById("dropdown-dropbtn1");
var onMain_target0 = document.getElementById("dropdown-list0");
var onMian_target1 = document.getElementById("dropdown-list1");
function onMain(){
    onMainbtn0.onmouseover = function(){
        onMain_target0.style.display = "block";
    }
    onMainbtn1.onmouseover = function(){
        onMain_target1.style.display= "block";
    }
    onMainbtn0.onmouseout = function(){
        onMian_target1.style.display="none";
    }
    onMainbtn1.onmouseout = function(){
        onMian_target0.style.display="none";
    }
}

这里是html中部分代码

<div id="guilde-dropdown">
    <button id="dropdown-dropbtn0">按钮1</button>
    <button id="dropdown-dropbtn1">按钮2</button>
</div>
<div id="dropdown-list">
    <div id="dropdown-list0">
        <a href="javascript:void(0)">下拉1</a>
    </div>
    <div id="dropdown-list1">
        <a href="javascript:void(0)">下拉1'</a>
    </div>
</div>

实现的功能:接触下拉菜单:鼠标移动到按钮显示下拉菜单

下拉菜单的内容开始时隐藏(display:none)

1个回答

变量名是错的, 对应的逻辑关系也是错的
不管学得怎么样起码态度端正一点ok? 用个有代码补全的编辑器能怎么了?

<html>
<head>
</head>
<body>
<div id="guilde-dropdown">
    <button id="dropdown-dropbtn0">按钮1</button>
    <button id="dropdown-dropbtn1">按钮2</button>
</div>
<div id="dropdown-list">
    <div id="dropdown-list0" style="display: none;">
        <a href="javascript:void(0)">下拉1</a>
    </div>
    <div id="dropdown-list1" style="display: none;">
        <a href="javascript:void(0)">下拉1'</a>
    </div>
</div>
<script>
    var onMainbtn0 = document.getElementById("dropdown-dropbtn0");
    var onMainbtn1 = document.getElementById("dropdown-dropbtn1");
    var onMain_target0 = document.getElementById("dropdown-list0");
    var onMain_target1 = document.getElementById("dropdown-list1");
    function onMain(){
        onMainbtn0.onmouseover = function(){
            onMain_target0.style.display = "block";
        }
        onMainbtn1.onmouseover = function(){
            onMain_target1.style.display= "block";
        }
        onMainbtn0.onmouseout = function(){
            onMain_target0.style.display="none";
        }
        onMainbtn1.onmouseout = function(){
            onMain_target1.style.display="none";
        }
    }
    onMain()
    </script>
</body>
</html>
weixin_43645287
小秦& 大哥消消气,我知道错了。。。
一年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问