鼠标悬停下拉答案

【问题标题】：DropDown on MouseOver鼠标悬停下拉
【发布时间】：2014-06-06 17:29:12
【问题描述】：

想知道如何使用以下代码 sn-p 实现这一点：每当我将鼠标悬停在测试上时，我想在鼠标悬停时显示一些下拉列表

<div id="appLinks">
    <ul id="appLinks_list" class="nav">
        <span id="appLink_csrname" class="ui-state-default csrname">Test</span>
            <li id="appLink_about" rtlOrder="3"><a title="tooltip"   href="javascript:openAboutDialog();">&nbsp; About</a></li>
        </span>
    </ul>
</div>

【问题讨论】：

您的 HTML 无效，只有 li 元素可以是 ul 的直接子元素。
也许你是对的，但这已经是工作代码我只需要提供鼠标悬停功能，因为我是基于网络的技术的新手，所以寻求一些帮助

标签： jquery html css

【解决方案1】：

仅供参考，您不需要任何 javascript 来执行此操作。

ul li { display:none; }
ul:hover li { display:block; }

【讨论】：

【解决方案2】：

试试这个：

<div id="outer">
  Outer
  <div id="inner">
    Inner
  </div>
</div>
<div id="other">
  Trigger the handler
 </div>
<div id="log"></div>

jquery：

 $( "#outer" ).mouseover(function() {
 $( "#log" ).append( "<div>Handler for .mouseover() called.</div>" );
 });

不要忘记我们的包含 Jquery 例子：

【讨论】：

【解决方案3】：

html

<ul class="my_list">
      <span>text</span>
               <li>hi</li>
               <li>i</li>
               <li>am</li>
               <li>archie</li>
               <li>abhi</li>
             </ul>

css:`

.my_list li{
            display: none;
              }
        .my_list:hover  li{
          display: block;
        }

javascript

 <script>
     $(document).ready(function(){
      $(".my_list").mouseleave(function(){
          $(".my_list li").css("display","none");
        });
        $(".my_list").mouseover(function(){
          $(".my_list li").css("display","block");
        });
     });
     </script>

【讨论】：