琴& 2018-12-14 13:55 采纳率: 50%
浏览 431
已采纳

为什么我这样改用的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条回答 默认 最新

  • crf_moonlight 2018-12-14 14:14
    关注

    变量名是错的, 对应的逻辑关系也是错的
    不管学得怎么样起码态度端正一点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>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

悬赏问题

  • ¥20 关于#stm32#的问题：需要指导自动酸碱滴定仪的原理图程序代码及仿真
  • ¥20 设计一款异域新娘的视频相亲软件需要哪些技术支持
  • ¥15 stata安慰剂检验作图但是真实值不出现在图上
  • ¥15 c程序不知道为什么得不到结果
  • ¥40 复杂的限制性的商函数处理
  • ¥15 程序不包含适用于入口点的静态Main方法
  • ¥15 素材场景中光线烘焙后灯光失效
  • ¥15 请教一下各位，为什么我这个没有实现模拟点击
  • ¥15 执行 virtuoso 命令后，界面没有，cadence 启动不起来
  • ¥50 comfyui下连接animatediff节点生成视频质量非常差的原因