Question

在更改类时更改链接的颜色属性时遇到一些问题。这是代码

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

这是我用来创建没有内联样式或其他任何内容的列表的html代码。

现在这是我的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;
}

目前没有元素有类.current所以我通过脚本向第一个元素添加类，这里是脚本

$("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);
    });

});

这里的困境是，带有class = current的li的背景正确地改变但是元素的color属性没有改变，你可以在( #information ul.pagination li.current a )的css属性中看到，我不知道什么是错了，但我已经被困了这么久，最后我决定问论坛。

请注意，脚本工作正常，因为背景正在发生变化。即使在网页的开头，当前班级的颜色为#fff，但之后也没有用，任何帮助都会非常感激。

P.S这是一个URL，您可以在其中看到它在开始时工作正常，但在背景图像定位发生变化但颜色不是

之后

enter image description here

Answer 1

在 DEMO

中可以正常使用

我添加了

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

这样很容易看到

更新了答案 尝试通过指定以下属性来覆盖默认链接颜色

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

Answer 2

它的工作完美。正如你在JSFiddle中看到的那样 http://jsfiddle.net/banded_krait/m9kV9/1/

如果代码中仍然无效，请尝试将!important放入该css。

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

为字幕颜色放这个css

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

我也更新了我的jsfiddle。请参阅。我将颜色从白色变为红色，看它是否有效。

Answer 3

尝试

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

您的代码运行正常，您使用的是color: white;

所以链接没有显示。

Answer 4

我没有看到任何错误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);
});

});

CSS颜色属性不起作用

4 个答案: