Почему мой hover css удаляется jQuery?

Я хотел иметь функцию наведения в сочетании с выбранной в данный момент функцией для навигации. Функция наведения присутствует, когда первая страница загружается; однако, после выбора элемента (и запуска скрипта), hover css, кажется, был удален, и я не уверен, почему. Вот мой файл (jsfiddle):Почему мой hover css удаляется jQuery?

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="UTF-8"> 
     <link rel="shortcut icon" href="/favicon.ico"> 
     <!--[if lt IE 9]> 
     <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
     <![endif]--> 
     <script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script> 
     <title>TITLE</title> 
     <style> 
     ul { 
      list-style: none; 
     } 

     li { 
      background-color: orange; 
      color: white; 
      float: left; 
      padding: 10px; 
     } 

     li:hover { 
      background-color: grey; 
      color: black; 
     } 
     </style> 
    </head> 
    <body> 
     <ul> 
     <li>one</li> 
     <li>two</li> 
     <li>three</li> 
     <li>four</li> 
     <li>five</li> 
     </ul> 

     <script type="text/javascript"> 
     $("li").click(function() { 
      $("li").each(function() { 
       $(this).css({'background-color' : 'orange',  
          'color' : 'white'});  
      }); 
      setHighlighted(this); 
     }); 

     var setHighlighted = function(ref) { 
      $(ref).css({'background-color' : 'grey', 
         'color' : 'black' 
      }); 
     } 
</script> 
    </body> 
</html>

источник

2013-09-09 alh

У меня нет энергии, чтобы писать полный ответ, но использование классы и сэкономить много головных боль при получении более чистый, Санер кода. Fiddle: http://jsfiddle.net/BxPW3/7/ –

Просто примечание стиля: было бы лучше и чище просто добавлять * класс * с JQuery и иметь объявление стиля класса в вашем CSS, а не устанавливать CSS стиль * напрямую * с помощью JQuery. –

Поскольку вы назначаете свойство стиля li «s с JQuery

$("li").each(function() { 
    $(this).css({ 
     'background-color': 'orange', 
      'color': 'white' 
    }); 
});

Об этом пишет в тег стиля элемента, который заменяет в

li:hover { 
    background-color: grey; 
    color: black; 
}

стиль

изменить ваш код

$("li").click(function() { 
    $("li").each(function() { 
     $(this).css({ 
      'background-color': '', 
       'color': '' 
     }); 
    }); 
    setHighlighted(this); 
});

JSFIDDLE

Это удалит background-color и color из свойства стиля li элементов, сделает li:hover стиль, который имеет преимущество

источник

2013-09-09 09:47:15 DGS

Просто добавьте !important на Li: селектор парения для фоновый цвет.

li:hover { 
      background-color: grey !important; 
      color: black; 
     }

demo

источник

2013-09-09 09:47:44

Проверить JS скрипку

http://jsfiddle.net/BxPW3/4/

$("li").click(function() { 
       /* $("li").each(function() {*/ 
        $(this).css({ 
         'background-color': 'orange', 
          'color': 'white' 
        }); 
       /* });*/ 
       setHighlighted(this); 
      }); 

      var setHighlighted = function(ref) { 
       $(ref).css({ 
        'background-color': 'grey', 
         'color': 'black' 
       }); 
      }

источник

2013-09-09 09:50:36

Не работает ссылки будут оставаться выделенными при выборе другой ссылки – DGS

У вас проверили скрипку перед комментированием? –

Да, у меня есть, и он не работает, как и следовало ожидать. В любой момент времени должен быть выбран только один элемент. – DGS

Лучший способ сделать, и легче:

$("li").each(function() { 
    $(this).click(function() { 
     //Your function 
    }); 
});

Теперь, чтобы s и др «активный» Постулаты, вы должны добавить класс:

.markup{ 
    background-color: grey; 
    color: black; 
}

И установить этот класс на правой LI после удаления существующего активного LI:

$("li").each(function() { 
    $(this).click(function() { 
     $(".markup").removeClass("markup") 
     $(this).addClass("markup"); 
    }); 
});

Посмотрите this fiddle

источник

2013-09-09 10:03:38 EdenSource

Я думаю, что это гораздо проще:

li { 
    padding: 10px; 
    float: left; 
    background-color: orange; 
    color: white; 
} 

li:hover, 
li.on { 
    background-color: gray; 
    color: black; 
}

Кроме того, он оставляет стиль только CSS:

$('ul').on('click', 'li', function(ev) { 
    $(ev.delegateTarget).find('.on').removeClass('on'); 
    $(this).addClass('on'); 
});

Смотрите эту скрипку: jsfiddle.net/rG4a5/

источник

2013-09-09 10:06:21 adjogima

Упс! дублировать. Не видел ответа @ EdenSource. Сожалею. – adjogima

Почему мой hover css удаляется jQuery?

ответ

Смежные вопросы