CODEWITHSUNDEEP
javascriptjquerycssrollovers
Margate
Margate

Reputation: 421

jQuery rollover and css :hover

I am trying to make a simple nav-bar in Jquery. I want to have the text change color on hover and when the text is clicked to remain in the hover color. Simple really, I have done this no problem in css using hover: and then in JQuery using an on click function. Problem is everything works fine until one of the items of the nav bar is clicked. Once a nav bar item is clicked the :hover no longer works? I am "ok" with css but very new to jQuery. I hope this is not a stupid question but I have tried to fix this for the past 2 hours using all kinds of jQuery code! The code just gets longer and I fix 1 problem but then create another! If you check the JSFiddle you will notice that the rollovers work until one is clicked! I want the :hover to remain working on the 2 un-clicked links! Here is the JSFiddle

Thank you very much for any help.

Code is as follows:

<!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>

Upvotes: 0

Views: 128

Answers (2)

Akhlesh
Akhlesh

Reputation: 2399

use jquery addClass and removeClass function

$(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/

See new fiddle with less code http://jsfiddle.net/KAxmS/2/

Upvotes: 1

Preli
Preli

Reputation: 3031

The reason why it is not working is very simple: When you set the color "manually" on the element, it will have a higher "priority" than the hover color and will always be present:

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

Create your own class (let's call it "current") and add/remove then when the user clicks the navigation --> http://jsfiddle.net/dmJ8p/

Upvotes: 3

Related Questions