CSS меню теряет фокус, когда часть jquery hover () - PullRequest
Новая
       6

CSS меню теряет фокус, когда часть jquery hover ()

5 голосов
/ 27 марта 2010

У меня есть следующий html (для просмотра на www.communityftw.com ) 

<table width="100%">
                        <tr>
                            <td style="text-align: left">
                                <!-- 2008.3.1314.35 --><span id="headerSearch1_sb_form_q_wrapper" class="RadInput_Default" style="white-space:nowrap;"><input value="language..." type="text" size="20" id="headerSearch1_sb_form_q_text" name="headerSearch1_sb_form_q_text" class="riTextBox riEmpty sw_qboxTop" name="q" style="width:140px;" /><input id="headerSearch1_sb_form_q" name="ctl00$headerSearch1$sb_form_q" class="rdfd_" style="visibility:hidden;margin:-18px 0 0 0;width:1px;height:1px;overflow:hidden;border:0;padding:0;" type="text" value="" /><input id="headerSearch1_sb_form_q_ClientState" name="headerSearch1_sb_form_q_ClientState" type="hidden" /></span>
                                <input type="submit" name="ctl00$headerSearch1$sb_form_go" value="" id="headerSearch1_sb_form_go" class="sw_qbtnTop" />
                            </td>
                            <td style="text-align: left">
                                <ul id="menu">
                                    <li class="languageContainer">
                                        <div>
                                            <a href="#" id="languageField">
                                                <img src="/images/flags/ca.png" alt="Canada" />
                                                Canada (English)</a>
                                        </div>
                                        <ul id="language">
                                            <li><a href="#" id="A1">
                                                <img src="/images/flags/ca.png" alt="Canada" />
                                                Canada (French)</a> </li>
                                            <li><a href="#" id="A2">
                                                <img src="/images/flags/us.png" alt="United States" />
                                                United States</a> </li>
                                            <li><a href="#" id="A3">
                                                <img src="/images/flags/de.png" alt="Germany" />
                                                Germany</a> </li>
                                            <li><a href="#" id="A4">
                                                <img src="/images/flags/fr.png" alt="France" />
                                                France</a> </li>
                                            <li><a href="#" id="A5">
                                                <img src="/images/flags/ru.png" alt="Russia" />
                                                Russia</a> </li>
                                            <li class="last">
                                                <img alt="" src="images/langLocDrop_r4_c1.png" />
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </td>
                        </tr>
    </table>

Javascript / JQuery 

$('#slide').animate({ top: '-=34' }, 1000); $("#slide").hover(function () { $(this).animate({ top: '+=34' }); }, function () { $(this).animate({ top: '-=34' }); });

CSS: 

#menu
{
    margin: 0px;
    padding: 0px;
    list-style: none;
    display: inline-block;
    float: left;
    z-index: 1000;
}
#menu a
{
    color: #dc2525;
    text-decoration: none;
}
#menu > li
{
    background: none repeat scroll 0 0;
    cursor: pointer;
    float: left;
    position: relative;
}
#menu > li a:hover
{
    color: orange;
}
#menu ul
{
    padding: 0px;
    margin: 0px;
    display: block;
    display: inline;
}
#menu li ul
{
    position: absolute;
    left: -15px;
    top: 0px;
    margin-top: 20px;
    width: 170px;
    line-height: 16px;
    background-image: url(/images/langLocDrop_r2_c1.png);
    display: none;
}
#menu li:hover ul
{
    display: block;
}
#menu li ul li
{
    display: block;
    margin: 5px 20px;
    padding: 5px 0px;
    border-top: dotted 1px #606060;
    list-style-type: none;
}
#menu li ul li:first-child
{
    border-top: none;
}
#menu li ul li a
{
    display: block;
}
#menu li ul li a:hover
{
    color: orange;
}
.languageContainer div
{
    display: inline;
    padding: 5px;
}

#languageField img
{
    display: inline;
    vertical-align: middle;
}

#language img
{
    display: inline;
}

#menu .last
{
    background: transparent none repeat scroll 0% 0%;
    margin: 0px;
    padding: 0px;
    border: none;
    position: relative;
    border: none;
    height: 0px;
}

То, что я пытаюсь сделать, это иметь меню, скрытое в верхней части, за исключением случаев, когда вы наводите на него курсор мыши, а затем когда вы наводите курсор мыши на язык, появляется подменю (только css-управление).

Однако происходит то, что когда я перехожу к списку языков и прохожу мимо Германии (~ 50% вниз по списку?), Hover () теряет фокус и закрывает исходное меню, которое закрывает языковое меню.

Есть идеи, что является причиной проблемы? Есть идеи, как решить проблему? Я также попробовал плагин hoverIntent (), но безрезультатно.

РЕДАКТИРОВАТЬ: Это происходит в Firefox и IE 8/7. Не пробовал хром.

1 Ответ

2 голосов
/ 28 марта 2010

Преобразование в ответ, чтобы закрыть это:

Проблема связана с полем и заполнением ... если вы удалите его на этом <ul>, вы увидите, что зависание заканчивается там, где будут элементы без полей или заполнения.

Я бы изменил меню, чтобы оно показывалось jQuery вместо CSS, и посмотрел бы, какое у вас поведение. Я думаю, что другое направление, в котором вы остановились, - лучший подход, зависание внутри зависания в лучшем случае сложно ... лучше упростить его, как выбранный вами маршрут.

...