jQuery .addClass не меняет CSS - PullRequest
Новая
       1

jQuery .addClass не меняет CSS

0 голосов
/ 18 августа 2010

В идеале я хочу навести курсор мыши на <li> в моем меню и выделить каждый <li>, но в качестве теста у меня есть следующее, чтобы изменить класс при наведении. Есть мысли, почему это не сработает?

Большое спасибо. 

.dropdownhoverIn a:hover
{
    background-color: White;
    color: #39C;
}

 <form id="form1" runat="server">
        <div id="multiDropMenu">
            <ul id="menu">
                <li><a href="#" id="places">Places</a>
                    <ul id="dropdown1">
                        <li><a href="http://google.com">To Go</a></li>
                        <li><a href="#">To See</a></li>
                    </ul>
                </li>
                <li><a href="#">Transportation</a></li>
            </ul>
        </div>
    </form>

$(document).ready(function() {
    $("#menu li").hover(function() {
        $(this).find("ul").find("a").hover(function() {   
            $(this).addClass("dropdownhoverIn"); 
        });
        $(this).find("ul").slideToggle(250);
    });
});

1 Ответ

0 голосов
/ 18 августа 2010

Избавьтесь от "внутреннего" назначения .hover(), 

$("#menu > li").hover(function() {
    $(this).find("ul a").addClass("dropdownhoverIn");
    $(this).find("ul").slideToggle(250);
});​

и псевдоселектора :hover в вашем классе. 

.dropdownhoverIn {
    background-color: White;
    color: #39C;
}​

Попробуйте: http://jsfiddle.net/GKZRU/

Когда вы вызываете .hover() параметр функции, вы назначаете обработчик.Нет причин делать это при каждом наведении курсора мыши на <ul>.

. И если вы используете jQuery .hover(), он вам на самом деле не нужен в CSS.Если вы хотите использовать его для совместимости, вам нужен отдельный селектор CSS для него.

Я также добавил > к селектору для .hover(), так как я предполагаю, что вы хотите, чтобы он активировался только у потомка#menu.

...