mouseenter .addClass

Тема в разделе "JavaScript", создана пользователем Denis_Pi, 3 сен 2013.

Модераторы: ZiX
  1. Denis_Pi

    Denis_Pi Art сreator

    Заблокирован
    Регистр.:
    8 май 2012
    Сообщения:
    398
    Симпатии:
    214
    переписываю меню на сайте
    Строение там такое
    HTML:
    <div>
    <ul>
    <li class="">.....</li>
    <li class="">.....</li>
    <li class="">.....</li>
    <li class="">.....</li>
    <li class="">.....</li>
    <li class="">.....</li>
    </ul>
    </div>
    Нужно что бы при наведении на <li class=""> - в класc писалось значение hovered

    сейчас я задал классы по умолчанию например <li class="limenu1">

    и делаю так

    Код:
        <script type="text/javascript">
    $(".limenu1").mouseenter(function(){
          $('.limenu1').addClass('hovered')
        }).mouseleave(function(){
          $('.limenu1').removeClass('hovered')
        });
        $(".limenu2").mouseenter(function(){
          $('.limenu2').addClass('hovered')
        }).mouseleave(function(){
          $('.limenu2').removeClass('hovered')
        });
        $(".limenu3").mouseenter(function(){
          $('.limenu3').addClass('hovered')
        }).mouseleave(function(){
          $('.limenu3').removeClass('hovered')
        });
        $(".limenu4").mouseenter(function(){
          $('.limenu4').addClass('hovered')
        }).mouseleave(function(){
          $('.limenu4').removeClass('hovered')
        });
        $(".limenu5").mouseenter(function(){
          $('.limenu5').addClass('hovered')
        }).mouseleave(function(){
          $('.limenu5').removeClass('hovered')
        });
    $(".limenu6").mouseenter(function(){
          $('.limenu6').addClass('hovered')
        }).mouseleave(function(){
          $('.limenu6').removeClass('hovered')
        });
    </script>
    но это костыль - и неправильный т.к. меню будет генериться системой автоматически и без заданных классов
    какой код необходимо использовать в данном случае... :dead:
     
    Шумадан нравится это.
  2. Шумадан

    Шумадан Хабарра!!11

    Регистр.:
    6 фев 2008
    Сообщения:
    1.722
    Симпатии:
    2.097
    дайте ul класс topnav (например) и потом
    а можно попробовать вообще без скрипта
     
    Denis_Pi нравится это.
  3. Шумадан

    Шумадан Хабарра!!11

    Регистр.:
    6 фев 2008
    Сообщения:
    1.722
    Симпатии:
    2.097
    $( "ul#menu > li" ).mouseenter( function() {...}); либо $( "ul.b-main-menu > li" ).mouseenter( function() {...});
    или css вариант
    ul#menu > li:hover{ background-color: #f00; } либо ul.b-main-menu > li:hover{ background-color: #f00; }
     
    Denis_Pi нравится это.
  4. Denis_Pi

    Denis_Pi Art сreator

    Заблокирован
    Регистр.:
    8 май 2012
    Сообщения:
    398
    Симпатии:
    214


    "а можно попробовать вообще без скрипта" - о не... это мы умем:D
    Здесь все сложнее, дело не в замене фона и т.д.

    ок, если код меню будет таким то каким будет код js?

    HTML:
    <div>
    <ul id="menu" class="b-main-menu">
    <li class="">.....</li>
    <li class="">.....</li>
    <li class="">.....</li>
    <li class="">.....</li>
    <li class="">.....</li>
    <li class="">.....</li>
    </ul>
    </div>
    Не выходит, яделал так
    Код:
    $("#menu").mouseenter(function(){
          $('li').addClass('hovered')
        }).mouseleave(function(){
          $('li').removeClass('hovered')
        });
    получается так же, как советуете и вы...
    т.е. при наведение на одну из li класс прописывается ко всем.

    Добавлено puagardian: Редактируйте сообщение, а не подряд пишите
     
    Последнее редактирование модератором: 3 сен 2013
    Шумадан нравится это.
  5. Шумадан

    Шумадан Хабарра!!11

    Регистр.:
    6 фев 2008
    Сообщения:
    1.722
    Симпатии:
    2.097
    попробуйте такое
    HTML:
    <html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <style>
        .hovered
        {
        font-weight: bold;
        }
        </style>
    </head>
    <body>
    <div>
    <ul id="menu" class="b-main-menu">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    </ul>
    </div>
    
    <script type="text/javascript">
    $( "ul#menu > li" ).mouseenter(function(){ $(this).addClass('hovered') })
    $( "ul#menu > li" ).mouseleave(function(){ $(this).removeClass('hovered') });
    </script>
    </body>
    </html>
    не правильно, нужно использовать
    $(this).

    посмотрите мой пример, запостил полный
     
    Denis_Pi нравится это.
  6. Denis_Pi

    Denis_Pi Art сreator

    Заблокирован
    Регистр.:
    8 май 2012
    Сообщения:
    398
    Симпатии:
    214
    Отлично, завелось как так и надо=)
    P.s
    Пишу модуль для 10500 многоуровнегого меню
     
    Шумадан нравится это.