悬停下拉列表在JavaScript中不起作用：它不'；我什么也没表现出来_Javascript_Html_Css

悬停下拉列表在JavaScript中不起作用：它不'；我什么也没表现出来

javascript html css

悬停下拉列表在JavaScript中不起作用：它不'；我什么也没表现出来,javascript,html,css,Javascript,Html,Css,代码不起作用。鼠标悬停时，菜单不会下降。代码中应该有什么错误？它只显示“Action”一词，当我将鼠标悬停在上面时，它不会显示任何内容 $（“#hoverli”）。悬停( 函数（）{ $（“#操作"菜单”）.finish（）.slideDown（'fast'）； }, 函数（）{ $（“#操作"菜单”）.finish（）.slideUp（'fast'）； } ); .lbtn{ 显示：内联块；光标：指针；高度：20px；背景颜色：银色；背景重复：重复-x；边框：1px纯黑； /*深

代码不起作用。鼠标悬停时，菜单不会下降。代码中应该有什么错误？它只显示“Action”一词，当我将鼠标悬停在上面时，它不会显示任何内容

$（“#hoverli”）。悬停(
函数（）{
$（“#操作"菜单”）.finish（）.slideDown（'fast'）；
},
函数（）{
$（“#操作"菜单”）.finish（）.slideUp（'fast'）；
}
);
.lbtn{
显示：内联块；
光标：指针；
高度：20px；
背景颜色：银色；
背景重复：重复-x；
边框：1px纯黑；
/*深海军蓝*/
文字装饰：无；
字号：11pt；
文本对齐：居中；
线高：20px；
填充：0px 10px 0px 10px；
}
.DivMenuwraper1{
高度：25px；
宽度：75px；
}
.file\u菜单{
显示：无；
宽度：250px；
边框：1px实心#1c1c；
背景色：白色；
位置：相对位置；
z指数：100000；
}
.file\u菜单div{
背景色：白色；
字号：10pt；
}
.file\u菜单分区a{
颜色：灰色；
文字装饰：无；
填充：3倍；
左侧填充：15px；
显示：块；
}
.file\u菜单div a:悬停{
填充：3倍；
左侧填充：15px；
文字装饰：下划线；
颜色：黑色；
}

行动

这是处于工作状态的代码。您需要确保在代码段之前导入了jQuery
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
  <div id="divMenuWrapper1" class="divMenuWrapper1">
    <div id="hoverli">
      <div class="lbtn">
        Actions
      </div>
      <div id="actions_menu" class="file_menu">
        <div><a href="#file">File</a></div>
        <div><a href="#edit">Edit</a></div>
        <div><a href="#view">View</a></div>
        <hr />
        <div><a href="#insert">Insert</a></div>
        <div><a href="#modify">Modify</a></div>
        <div><a href="#control">Control</a></div>
        <div><a href="#debug">Debug</a></div>
        <div><a href="#window">Window</a></div>
      </div>
    </div>
  </div>
</body>
<style>
.lbtn {
  display: inline-block;
  cursor: pointer;
  height: 20px;
  background-color: silver;
  background-repeat: repeat-x;
  border: 1px solid black;
  /* dark navy blue */
  text-decoration: none;
  font-size: 11pt;
  text-align: center;
  line-height: 20px;
  padding: 0px 10px 0px 10px;
}

.divMenuWrapper1 {
  height: 25px;
  width: 75px;
}

.file_menu {
  display: none;
  width: 250px;
  border: 1px solid #1c1c1c;
  background-color: white;
  position: relative;
  z-index: 100000;
}

.file_menu div {
  background-color: white;
  font-size: 10pt;
}

.file_menu div a {
  color: gray;
  text-decoration: none;
  padding: 3px;
  padding-left: 15px;
  display: block;
}

.file_menu div a:hover {
  padding: 3px;
  padding-left: 15px;
  text-decoration: underline;
  color: black;
}
</style>
<script>
$(document).ready(function() {
  $("#hoverli").hover(
    function() {
        $('#actions_menu').finish().slideDown('fast');
    },
    function() {
        $('#actions_menu').finish().slideUp('fast');
    }
  );
});
</script>
</html>


行动

.lbtn{
显示：内联块；
光标：指针；
高度：20px；
背景颜色：银色；
背景重复：重复-x；
边框：1px纯黑；
/*深海军蓝*/
文字装饰：无；
字号：11pt；
文本对齐：居中；
线高：20px；
填充：0px 10px 0px 10px；
}
.DivMenuwraper1{
高度：25px；
宽度：75px；
}
.file\u菜单{
显示：无；
宽度：250px；
边框：1px实心#1c1c；
背景色：白色；
位置：相对位置；
z指数：100000；
}
.file\u菜单div{
背景色：白色；
字号：10pt；
}
.file\u菜单分区a{
颜色：灰色；
文字装饰：无；
填充：3倍；
左侧填充：15px；
显示：块；
}
.file\u菜单div a:悬停{
填充：3倍；
左侧填充：15px；
文字装饰：下划线；
颜色：黑色；
}
$（文档）.ready（函数（）{
$（“#hoverli”）。悬停(
函数（）{
$（“#操作"菜单”）.finish（）.slideDown（'fast'）；
},
函数（）{
$（“#操作"菜单”）.finish（）.slideUp（'fast'）；
}
);
});
您只需将JQuery.js的链接添加到html代码中即可检查浏览器控制台是否存在错误。我猜您的jQuery代码在页面内容可用之前就已经运行了，这解释了为什么代码片段可以工作，而您的版本不能工作。@collinger添加链接是什么意思？我不明白。我没有使用外部js。它嵌入在html和im中，使用.html作为格式。“错了吗？”我查了一下。它说美元没有定义。如何定义它？确保在运行自己的代码之前加载jQuery。您的代码依赖于jQuery（$）的加载。谢谢！现在开始工作了。如果我使用javascript，为什么我需要jquery tho？我需要了解这两个！这是：$（“#hoverli”）.hover（函数（）{$（'#操作_菜单'）.finish（）.slideDown（'fast'）；}，函数（）{$（'#操作_菜单'）.finish（）.slideUp（'fast'）；}）
是一个jQuery代码。因此，您需要jQuery。否则，您需要将其转换为JavaScript等效代码段。我不明白编码的区别。在我看来是一样的。不管怎么说，是否有与之相当的javascript代码？我真的以为是JS代码。等效代码是什么？我可以知道它们之间的区别吗？$（“#hoverli”）
是JavaScript中的document.getElementById（'hoverli'）
。另外，JavaScript中没有任何hover（）
事件。它可以通过处理其他鼠标事件来实现。另外，这段代码有点太复杂，无法用JavaScript实现。这确实有区别。谢谢你告诉我。