Question

我有以下css样式应用我的html锚标记。

.my_button .left {
        float: left;
        width: 10px;
        height: 19px;
        background: url("./images/bl.png") left center no-repeat;
    }

    .my_button .right {
        float: left;
        width: 10px;
        height: 19px;
        background: url("./images/br.png") left center no-repeat;
    }

鼠标悬停在锚标签上我再应用一种css样式。下面的代码几乎与上面的CSS样式的excpet背景url类似。是否有可能避免重复的CSS代码？

.my_button_hover .left {
        float: left;
        width: 10px;
        height: 19px;
        background: url("./images/bl-active.png") left center no-repeat;
    }
.my_button_hover .right {
    float: left;
    width: 10px;
    height: 19px;
    background: url("./images/br-active.png") left center no-repeat;
}

谢谢！

Answer 1

像这样

.my_button .left,.my_button .right {
        float: left;
        width: 10px;
        height: 19px;
        background: url("./images/bl.png") left center no-repeat;
    }

    .my_button .right {
        background: url("./images/br.png") left center no-repeat;
    }

和悬停

.my_button:hover .left,.my_button:hover .right {
        float: left;
        width: 10px;
        height: 19px;
        background: url("./images/bl-active.png") left center no-repeat;
    }
.my_button:hover .right {

    background: url("./images/br-active.png") left center no-repeat;
}

Answer 2

为公共属性提供一个公共类，并将该类应用于html元素。就这样：

.commons {
    float: left;
    width: 10px;
    height:19px;
}

.my_button .left {
        background: url("./images/bl.png") left center no-repeat;
    }

.my_button .right {
    background: url("./images/br.png") left center no-repeat;
}

.my_button_hover .left {
        background: url("./images/bl-active.png") left center no-repeat;
    }

.my_button_hover .right {
    background: url("./images/br-active.png") left center no-repeat;
}

在HTML标记中：

<a href="#" class="commons my_button left">...</a>
<a href="#" class="commons my_button_hover right">...</a>

也可以通过应用background-position, background-repeat选项进一步优化。

编辑：您应该真正查找:hover选择器。

Answer 3

不确定您的网站结构，但这可行吗？

.my_button {
        width: 10px;
        height: 19px;
    }
.left {
        float: left;
        background: url("./images/bl.png") left center no-repeat;
    }
.left:hover {
        background: url("./images/bl.png") left center no-repeat;
    }

.right {
float: right;
background: url("./images/br.png") left center no-repeat;
    }
.right:hover {
        background: url("./images/br.png") left center no-repeat;
    }

CSS删除两个类中的重复代码？

3 个答案: