Что jquery добавить, чтобы фон <li>оставался выделенным при наведении на подпункт (div) - PullRequest
Новая
       23

Что jquery добавить, чтобы фон <li>оставался выделенным при наведении на подпункт (div)

0 голосов
/ 07 декабря 2010

У меня есть раскрывающееся меню, в котором при наведении курсора мыши на ссылку отображается подраздел. Сценарий работает отлично, за исключением того, что когда я помещаю свою мышь в это подразделение, фон родительской ссылки больше не остается выделенным, как это обычно происходит при наведении курсора. Я думаю, что это #megamenu, что я хочу, чтобы остаться выделенным с соответствующим div. Ниже приведен код, пожалуйста, помогите.

Мой сайт, до сих пор был только раскрывающийся список о dke, но он делает то, о чем я говорю ...

http://www.nestudiosonline.com/test.php

HTML: 

<ul id="menu">
        <li class="mega"><a class="dkeorg" href="#">DKE.ORG</a></li>
        <li class="megamenu" id="dave"><a class="links" href="#">ABOUT DKE</a> <div id="aboutdke">div content  </div></li>
        <li class="megamenu"><a class="links" href="#">ALUMNI</a></li>
        <li class="megamenu"><a class="links" href="#">UNDERGRADUATES</a></li>
        <li class="megamenu"><a class="links" href="#">EVENTS</a></li>
        <li class="megamenu"><a class="links" href="#">MULTIMEDIA</a></li>
        <li class="megamenu"><a class="links" href="#">SHOP DKE</a></li>
      </ul>

CSS 

ul#menu
{
    display:block;
    list-style-type:none;
    margin:0;
    padding:0;
}

ul# menu li
{
    display:inline;
    position: relative;
    }

ul#menu div {
  display: none;
}

ul#menu li.mega div {
    position: absolute;
}

ul#menu li.hovering div {
  display: block;
}

#aboutdke
{
    display:block;
    color:#FFF;
    text-align:left;
    font-family:Verdana, Geneva, sans-serif;
    font-size:10px;
    background-color:#000;
    margin:0;
    padding-top:10px;
    padding-right:10px;
    padding-bottom:10px;
    padding-left:10px;
    border:0px;
    width:910px;
    height:280px;
    float:left;
    position:absolute;
    z-index:99999;
    top:164px;
    left:140px;
}

a.links:link
{
    display:block;
    width:120px;
    height:22px;
    padding-top:8px;
    padding-left:3px;
    padding-bottom:0px;
    color:#FFF;
    text-decoration:none;
    text-align:center;
    outline:none;
    float:left;
}

a.links:visited 
    {
    display:block;
    width:120px;
    height:22px;
    padding-top:8px;
    padding-left:3px;
    padding-bottom:0px;
    color:#FFF;
    text-decoration:none;
    text-align:center;
    outline:none;
    float:left;
    } 

/* mouse over link */

a.links:hover
    {
    display:block;
    width:120px;
    height:22px;
    padding-top:8px;
    padding-left:3px;
    padding-bottom:0px;
    color:#FFF;
    text-decoration:underline;
    text-align:center;
    outline:none;
    background-color:#000;
    float:left;
    }   

/* selected link */

a.links:active
    {
    display:block;
    width:120px;
    height:22px;
    padding-top:8px;
    padding-left:3px;
    padding-bottom:0px;
    color:#FFF;
    text-decoration:underline;
    text-align:center;
    outline:none;
    background-color:#000;
    float:left;
    }

JQuery:

1 Ответ

1 голос
/ 07 декабря 2010

Вы можете сделать это с помощью CSS.Измените строку 

a.links:hover

на: 

a.links:hover, .megamenu.hovering a.links

в topbanner_back.css.

По сути, вы говорите, что когда объект имеет класс 'megamenu'И «зависания», теги с классом «ссылки» должны выглядеть так же, как и при наведении.

...