mouseenter .addClass

Denis_Pi

Denis_Pi

Art сreator
Заблокирован
Регистрация
8 Май 2012
Сообщения
405
Реакции
240
  • Автор темы
  • Заблокирован
  • #1
переписываю меню на сайте
Строение там такое
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:
 
DENIS1000000 написал(а):
ок, если код меню будет таким то каким будет код 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>
Нажмите для раскрытия...
$( "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; }
 
  • Автор темы
  • Заблокирован
  • #4
Шумадан написал(а):
дайте ul класс topnav (например) и потом


а можно попробовать вообще без скрипта
Нажмите для раскрытия...



"а можно попробовать вообще без скрипта" - о не... это мы умем: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>

Шумадан написал(а):
$( "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; }
Нажмите для раскрытия...
Не выходит, яделал так
Код: 
$("#menu").mouseenter(function(){
      $('li').addClass('hovered')
    }).mouseleave(function(){
      $('li').removeClass('hovered')
    });
получается так же, как советуете и вы...
т.е. при наведение на одну из li класс прописывается ко всем.

Добавлено puagardian: Редактируйте сообщение, а не подряд пишите
 
Последнее редактирование модератором:
попробуйте такое
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>

DENIS1000000 написал(а):
Не выходит, яделал так
Код: 
$("l#menu").mouseenter(function(){
      $('li').addClass('hovered')
    }).mouseleave(function(){
      $('li').removeClass('hovered')
    });
получается так же, как советуете и вы...
т.е. при наведение на одну из li класс прописывается ко всем.
Нажмите для раскрытия...
не правильно, нужно использовать
$(this).

посмотрите мой пример, запостил полный
 
  • Автор темы
  • Заблокирован
  • #6
Шумадан написал(а):
попробуйте такое
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).

посмотрите мой пример, запостил полный
Нажмите для раскрытия...

Отлично, завелось как так и надо=)
P.s
Пишу модуль для 10500 многоуровнегого меню
 
Войдите или зарегистрируйтесь для ответа.
Назад
Сверху