在下拉菜单的子菜单中如何将鼠标悬停在父菜单上 [英] How to keep the Parent menu hovered while the mouse in child menu in a Dropdown Menu

问题描述

我正在尝试创建一个下拉菜单.运行良好.当鼠标悬停成白色时，我想要顶层菜单.向下移动到子菜单时，顶部菜单应保持白色.但是顶部菜单会变成其正常的原始颜色.

I am trying to create a dropdown menu. It working well. I want the top menu when hovered truns into white color. when moving down to the submenus, the top menu should stay in white color. But the top menu turns into its normal original color.

在子菜单中移动鼠标时如何保持父菜单悬停.

How to keep the parent menu hovered while moving mouse in the submenus.

代码在这里:

HTML

 <ul id="jsddm" class="menu_nor_cont">
         <li style="margin-left:15px;"><a href="#">Home</a>
        <li><a href="#">Job Seeker Login</a>

        </li>
        <li><a href="#">Post Resume</a>
        </li>
        <li><a href="#">Search jobs<span style="margin-left:5px;"><img src="images/down.png"  style="width=15px; height=8px;"></span></a>
            <ul>
                <li><a href="#">Advanced Search</a></li>
                <li><a href="#">Jobs by Company</a></li>
                <li><a href="#" style="border-bottom:none;">Jobs by category</a></li>
            </ul>
        </li>
        <li><a href="#">Employer Login</a></li>
        <li><a href="#"  style="border-right:none;">Post Job</a></li>
    </ul>

JS

var timeout    = 0;
var closetimer = 0;
var ddmenuitem = 0;

function jsddm_open()
{  jsddm_canceltimer();
   jsddm_close();
   ddmenuitem = $(this).find('ul').css('visibility', 'visible');}

function jsddm_close()
{  if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

function jsddm_timer()
{  closetimer = window.setTimeout(jsddm_close, timeout);}

function jsddm_canceltimer()
{  if(closetimer)
   {  window.clearTimeout(closetimer);
      closetimer = null;}}

$(document).ready(function()
{  $('#jsddm > li').bind('mouseover', jsddm_open)
   $('#jsddm > li').bind('mouseout',  jsddm_timer)});

document.onclick = jsddm_close;

CSS

#jsddm
{   margin: 0;
    padding: 0;


}

    #jsddm li
    {   
        float: left;
        list-style: none;

    }

    #jsddm li a
    {   display: block;
        padding: 5px 12px;
        padding-left:15px;
        padding-right:15px;
        text-decoration: none;
        border-right: 1px solid #DBDBDB;
        padding-bottom:6px;
        color: #EAFFED;
        white-space: nowrap}

    #jsddm li a:hover
    {   
        background-color:#FFF;
        color:#000;

    }

        #jsddm li ul
        {   margin: 0;
            padding: 0;
            position: absolute;
            visibility: hidden;
            border:#3895C0 1px solid;
            border-top:none;

            z-index:1001;
            margin-left:-2px;
        }

        #jsddm li ul li
        {   float: none;
            display: inline;
            margin:0px;


        }

        #jsddm li ul li a
        {   width: auto;
            background: #fff;
            color:#080CB2;
            font-weight:normal;
            font-size:11px;
            border-bottom:1px solid #CCC;
            text-decoration:none;
            width:180px;
        }

        #jsddm li ul li a:hover
        {

            text-decoration:underline;
            color:#080CB2;
        }

推荐答案

该问题是由于CSS中的悬停"状态所致，因此当您离开"a"元素时，您会松开悬停状态.

The problem it is due to the "hover" state being in CSS, so when you leave the "a" element you loose the hover state.

只需对代码进行一些修改即可完成这项工作.

a couple modifications to your code should make this work.

            function jsddm_open() {
                jsddm_canceltimer();
                jsddm_close();
                ddmenuitem = $(this).find('ul').css('visibility', 'visible');
                $(">a", $(this)).css("background-color", "#FFF");
            }

           function jsddm_close() {
                if (ddmenuitem) {
                    ddmenuitem.css('visibility', 'hidden');
                    $(ddmenuitem).prev().css("background-color", "");
                }
            }

注意:您在发布的代码中还缺少结尾的li标记

NOTE: you are also missing a ending li tag in the code posted

这篇关于在下拉菜单的子菜单中如何将鼠标悬停在父菜单上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！