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

我已经在下面的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;
}

谢谢

像这样

.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;
}

---

为公共属性指定一个公共类，并将该类应用于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>

还可以通过应用

背景位置、背景重复

选项进一步优化

---

编辑：您应该真正查找

：hover

选择器。

不确定您的站点结构，但这是否可行

.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样式在哪里？我现在添加了它们。对于悬停，我们写：hover not\u hover你不需要一次又一次地使用所有css属性，只需要使用你想要更改的属性。为什么你有一个单独的悬停类？为什么不使用

：hover

选择器？当你知道他正在尝试通过_hover…lol实现hover时，你会感到震惊