如何更改此旋转横幅的控件外观

时间:2012-12-10 14:25:50

标签: javascript css

我想更改此旋转横幅的控件外观。它们目前只是灰色(当前/选定的是黑色)。我希望这些点是白色的,带有灰色轮廓(选中的/当前的点是橙色,带有灰色轮廓)。

这是css(我相信选择器是:.rslides_tabs a):

.rslides_container
{
    position: relative;
}

.rslides
{
    position: relative;
    list-style: none;
    overflow: hidden;
    width: 100%;
    padding: 0;
    margin: 0;
}

    .rslides li
    {
        position: absolute;
        display: none;
        width: 100%;
        left: 0;
        top: 0;
    }

    .rslides li:first-child
    {
        position: relative;
        display: block;
        float: left;
    }

        .rslides img
        {
            display: block;
            height: auto;
            float: left;
            width: 100%;
            max-width:  100%;
            border: 0;
        }

    .rslides_tabs
    {
        margin-top: 10px;
        text-align: center;
    }

        .rslides_tabs li
        {
            display: inline;
            float: none;
            _float: left;
            *float: left;
            margin-right: 5px;
        }

            .rslides_tabs a
            {
                text-indent: -9999px;
                overflow: hidden;
                -webkit-border-radius: 15px;
                -moz-border-radius: 15px;
                border-radius: 15px;
                -webkit-background-clip: padding-box;
                background: #ccc;
                display: inline-block;
                _display: block;
                *display: block;
                -webkit-box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
                -moz-box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
                box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
                width: 9px;
                height: 9px;
            }

            .rslides_tabs .rslides_here a
            {
                background: #222;
            }

    .rslides_nav
    {
        position: absolute;
        -webkit-tap-highlight-color: #000;
        top: 50%;
        left: 0;
        -webkit-opacity: 0.7;
        -moz-opacity: 0.7;
        -o-opacity: 0.7;
        filter: alpha(opacity=70);
        opacity: 0.7;
        text-indent: -9999px;
        overflow: hidden;
        text-decoration: none;
        height: 61px;
        width: 38px;
        background: transparent url( '../images/responsiveslides.gif' ) no-repeat left top;
        margin-top: -45px;
    }

    .rslides_nav:active,
    .rslides_nav:hover
    {
        -webkit-opacity: 1;
        -moz-opacity: 1;
        -o-opacity: 1;
        filter: alpha(opacity=100);
        opacity: 1;
    }

    .rslides_nav.next
    {
        left: auto;
        background-position: right top;
        right: 0;
    }

如果您需要更多代码来帮助我,请告诉我们。

2 个答案:

答案 0 :(得分:2)

.rslides_tabs .rslides_here a

您目前所在的那个

.rslides_tabs a

是否有未选中的点的值。

将背景属性更改为您想要的颜色。

答案 1 :(得分:2)

.rslides_tabs a {
  background-color:red;
  border: 1px solid grey;
//here goes your style
}

.rslides_tabs .rslides_here a {
  //here goes your style for the selected one
}