jQuery rollover и css:hover

Я пытаюсь сделать простую навигационную панель в Jquery. Я хочу, чтобы текст менял цвет при наведении курсора и, когда по тексту щелкали, оставался цвет при наведении. На самом деле все просто, я сделал это без проблем в css, используя hover: а затем в JQuery, используя функцию щелчка. Проблема в том, что все работает нормально, пока один из пунктов навигационной панели не будет нажат. При нажатии на элемент навигационной панели:hover больше не работает? Я в порядке с CSS, но очень плохо знаком с JQuery. Я надеюсь, что это не глупый вопрос, но я пытался исправить это в течение последних 2 часов, используя все виды кода jQuery! Код становится длиннее, и я исправляю одну проблему, а затем создаю другую! Если вы проверите JSFiddle, вы заметите, что ролловеры работают до тех пор, пока один из них не будет нажат! Я хочу, чтобы:hover продолжал работать над 2 неотключенными ссылками! Вот JSFiddle

Большое спасибо за любую помощь.

Код выглядит следующим образом:

<!DOCTYPE html>
<head>
    <title>Help!</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <style type="text/css">
      #wedding-tips, #general-tips, #travel-tips{ cursor: pointer;}
      #wedding-tips:hover, #general-tips:hover, #travel-tips:hover{color: #bc2021;}
    </style>

    <script>
      $(document).ready(function(){
      $("#wedding-tips-container, #travel-tips-container").hide();

      $("#general-tips").click(function(){
      $("#wedding-tips-container,#travel-tips-container").hide('slow');
      $("#general-tips-container").show('slow');
      $("#general-tips").css("color","#bc2021");
      $("#wedding-tips,#travel-tips").css("color","#000");
      });

      $("#wedding-tips").click(function(){
      $("#general-tips-container,#travel-tips-container").hide('slow');
      $("#wedding-tips-container").show('slow');
      $("#wedding-tips").css("color","#bc2021");
      $("#general-tips,#travel-tips").css("color","#000");
      });

      $("#travel-tips").click(function(){
      $("#general-tips-container,#wedding-tips-container").hide('slow');
      $("#travel-tips-container").show('slow');
      $("#travel-tips").css("color","#bc2021");
      $("#wedding-tips,#general-tips").css("color","#000");
      });     
      });
    </script>
</head>

<body>

 <div id="content-selector-div">
    <div id="general-tips">General Photography Tips</div>
    <div id="wedding-tips">Wedding Photography Tips</div>
    <div id="travel-tips">Travel Photography Tips</div>
 </div><br />

<div id="general-tips-container">
    <p>General Tips Here</p>
</div>

<div id="wedding-tips-container">
    <p>Wedding Tips Here</p>
</div>

<div id="travel-tips-container">
    <p>Travel Tips Here</p>
</div>

</body>
</html>
Источник

2 ответа

Решение

Используйте jquery addClass и функцию removeClass

$(document).ready(function () {
 $("#wedding-tips-container, #travel-tips-container").hide();

 $("#general-tips").click(function () {
    $("#wedding-tips-container,#travel-tips-container").hide('slow');
    $("#general-tips-container").show('slow');
    $("#general-tips").addClass("active");
    $("#wedding-tips,#travel-tips").removeClass("active");
 });

  $("#wedding-tips").click(function () {
    $("#general-tips-container,#travel-tips-container").hide('slow');
    $("#wedding-tips-container").show('slow');
    $("#wedding-tips").addClass("active");
    $("#general-tips,#travel-tips").removeClass("active");
 });

 $("#travel-tips").click(function () {
    $("#general-tips-container,#wedding-tips-container").hide('slow');
    $("#travel-tips-container").show('slow');
    $("#travel-tips").addClass("active");
    $("#wedding-tips,#general-tips").removeClass("active");
 });
});

http://jsfiddle.net/KAxmS/1/

Смотрите новую скрипку с меньшим количеством кода http://jsfiddle.net/KAxmS/2/

Источник

Причина, по которой он не работает, очень проста: когда вы устанавливаете цвет "вручную" для элемента, он будет иметь более высокий "приоритет", чем цвет при наведении, и всегда будет присутствовать:

$("#wedding-tips,#travel-tips").css("color","#000"); --> problem

Создайте свой собственный класс (назовем его "текущий") и добавьте / удалите его, когда пользователь нажимает кнопку навигации -> http://jsfiddle.net/dmJ8p/

Источник
Другие вопросы по тегам