#dropdown:hover #dropdown-list {
display: block;
}
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>