CODEWITHSUNDEEP
javascriptjqueryhtmlcsspagination
Haris Mehmood
Haris Mehmood

Reputation: 902

CSS color property not working

I am having some trouble changing the color property of a link when its class is changed. Here is the code

<div id="information">
    <ul class="pagination">
        <li><a href="#"><span>Administration</span><small>Learn Site Administration</small></a></li>
        <li><a href="#"><span>Management</span><small>Learn Access Management</small></a></li>
        <li><a href="#"><span>Dashboard</span><small>Learn Dashboard Functions</small></a></li>
        <li><a href="#"><span>Visitors</span><small>Learn Visitor Management</small></a></li>                        
    </ul>
</div>

This is the html code i am using to create my list with no inline style or anything else.

Now here is my css.

#information {
width: 1000px;
height: 350px;
margin: 0 auto;
background:url(../images/information-bg.jpg) no-repeat 25px 5px;
}
#information ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
#information ul.pagination{
    float: left;
    list-style:none;
    padding:0;
    margin:0;
    width:246px;
    height:350px;
    background:url(../images/pagination-bg.jpg) no-repeat left top;
}
#information ul.pagination li {
    padding:5px 0 0 5px;
    margin-bottom:-5px;
}
#information ul.pagination li a {
    width:270px;
    height:85px;
    background-repeat:no-repeat;
    background-position:left -85px;
    background-image:url(../images/thumb-sprite.png);
    text-decoration:none;
    display:block;
    color: #464646;
}
#information ul.pagination li.current a {
    background-position:left top;
    color: white;
}
#information ul.pagination li a span {
    font-size: 26px;
    line-height: 1.2em;
    display: block;
    padding: 14px 0 0 0;
}
#information ul.pagination li a small {
    display:inline-block;
    color:#428301;
    background-repeat:no-repeat;
    background-position:right -80px;
    background-image:url(../images/arrows.gif);
    padding:0 17px 0 0;
    font-size: 10px;
}
#information ul.pagination li.current a small {
    font-size: 10px;
    color: #89C100;
    background-position:right 5px;
}
#information ul.pagination li a span, #information ul.pagination li a small {
    padding-left:40px;
}

Currently no element have a class .current so I add class to first element through script and , here is the script

$("document").ready(function(){

    //Adding class to pagination and showing first image
    var currentPagination = $("ul.pagination li:eq(0)").addClass("current");
    var currentslide = $("ul.slides li:eq(0)").fadeIn(2000);    


    //On click of pagination link, changing background of pagination and anmating new slide
    $("ul.pagination li").click(function (){           
        currentPagination.removeClass("current");        
        currentPagination = $(this).addClass("current");              
        var ul = $(this).parent();
        var index = ul.children().index(this);
    });

});

The dilemma here is that, the background of the li with class = current is changing correctly but the color property of the element is not changing, which you can see in css property of ( #information ul.pagination li.current a ), i dont know whats wrong with it, but i have been stuck for so long finally i decided to ask of forum.

Please note that the script is working fine because background is changing perfectly. Even at the start of webpage li with current class has the color #fff but it doesnt work afterwards, any help will be much appreciated.

P.S Here is the URL in which you can see it works fine at start but after that background image positioning changes but color does not

enter image description here

Upvotes: 1

Views: 4546

Answers (4)

Vivek Parekh
Vivek Parekh

Reputation: 1085

It works fine in this DEMO

I have added

#information ul.pagination li.current a {
    background-position:left top;
    background-color: black; 
    color: white;
}

So that it is easily visible

Updated Answer try to override the default link color by specifying the following property 

#information ul.pagination li.current a:active{ 
    color: #FFF;
}

Upvotes: 1

Mokhlesur Rahman
Mokhlesur Rahman

Reputation: 761

Its working perfectly. as you can see in JSFiddle http://jsfiddle.net/banded_krait/m9kV9/1/

if it's still not working in your code try to put !important to that css.

#information ul.pagination li.current a {
    background-position:left top;
    color: red !important;
}

for the subtitle color put this css

#information ul.pagination li.current a small {
    color: red !important;
}

I also updated my jsfiddle. please see. I changed the color from white to red to see that it's working or not.

Upvotes: 2

Alex
Alex

Reputation: 8072

I don't see any error here

$("document").ready(function(){

//Adding class to pagination and showing first image
var currentPagination = $("ul.pagination li:eq(0)").addClass("current");
var currentslide = $("ul.slides li:eq(0)").fadeIn(2000);    


//On click of pagination link, changing background of pagination and anmating new slide
$("ul.pagination li").click(function (){           
    currentPagination.removeClass("current");        
    currentPagination = $(this).addClass("current");              
    var ul = $(this).parent();
    var index = ul.children().index(this);
});

});

Upvotes: 0

Kanishka Panamaldeniya
Kanishka Panamaldeniya

Reputation: 17576

try 

#information ul.pagination li.current a {
    background-position:left top;
    color: red;
}

your code is working fine , the thing is you are using color: white;

so link is not showing .

Upvotes: 0

Related Questions