- 为什么我这样改用的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)
变量名是错的, 对应的逻辑关系也是错的
不管学得怎么样起码态度端正一点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>
