jQuery CSS Hover - PullRequest
Новая
       14

jQuery CSS Hover

4 голосов
/ 29 октября 2009

У меня есть меню CSS, которое устанавливает цвет родительского li при наведении на него, и это дочерний ul (подменю). По сути, когда вы наводите курсор мыши на меню, оно меняет цвет и остается таким до тех пор, пока вы не наведите курсор мыши на меню и его подменю. Это выглядит красиво.

Я добавил некоторый код jQuery для изменения цвета пунктов меню, когда не открыта определенная страница. Затем эти меню исчезнут и вернут цвет. В этот момент, ожидая, когда наведите курсор на изменение цвета.

Проблема, с которой я сталкиваюсь, заключается в том, что когда вы возвращаете цвет обратно в исходное состояние (установленное в CSS) с помощью jQuery, он удаляет класс: hover, предотвращающий изменение цвета при наведении на него, и его дочернее подменю. Любые идеи о том, как это исправить? Есть ли селектор с jQuery, который позволит мне вернуть класс: hover в нормальное состояние? 

/* ---- Menu Colours ---- */
$(document).ready(function()
{
   var colours = ['d50091', 'c8fa00', '00b4ff', 'b158fc', 'ffa800', '00b72f'];
   var counter = 0; // Loop for the colurs
   var status  = 0; // Status of the colours (greyed out or visible)

   $('ul.menu-horiz').children('li').children('a').hover(function()
   {
      $(this).parent()[0].css('color', '#d50091');
   }, function()
   {
      $(this).parent()[0].css('color', '#b6b6b6');
   });

   $('ul.menu-horiz').children('li').children('a').each(function()
   {
      $(this).css({opacity: 0.2, color: '#' + colours[counter]});
      counter++;
   });

   $('.haccordion .header').click(function()
   {
      if (window.location.hash.substr(1) == 'photogallery')
      {
         $('ul.menu-horiz').children('li').children('a').each(function()
         {
            if ($(this).css('opacity') != '1.1')
            {
               $(this).animate({opacity: 1.1}, 1000).css('color', '#b6b6b6');
            }
         });
      }
      else
      {
         counter = 0;
         if ($('ul.menu-horiz').children('li').children('a').css('opacity') != '0.2')
         {
            $('ul.menu-horiz').children('li').children('a').animate({opacity: 0.2}, 1000, function()
            {
               $('ul.menu-horiz').children('li').children('a').each(function()
               {
                  $(this).css('color', '#' + colours[counter]);
                  counter++;
               });
            });
         }
      }
   });
});

Ответы [ 2 ]

6 голосов
/ 29 октября 2009

Вы должны иметь возможность использовать селектор :hover и передавать функции over() и out(), которые устанавливают и отменяют цвет при наведении соответственно. Подробнее см. :hover документацию .

Простой пример

с учетом CSS: 

<style>
   .blue { background-color: blue; }
   .red { background-color: red; }
</style>

сделать что-то вроде этого: 

$('li').hover(function() {
      $(this).removeClass('red'); 
      $(this).addClass('blue');
   }, 
   function() {
      $(this).removeClass('blue'); 
      $(this).addClass('red');
   })
0 голосов
/ 29 октября 2009

У меня были проблемы с применением изменения цвета к элементу при наведении на его родительский элемент

(как вы можете видеть из кода, размещенного выше).

Взял меня до сих пор, чтобы понять, что его нужно изменить на 

$('ul.menu-horiz').children('li').hover(function()
{
   $(this).children('a').css('color', '#d50091');
}, function()
{
   $(this).children('a').css('color', '#b6b6b6');
});

Игнорировать меня> _>

...