开发者

change color in css without adding a new class?

I have a calss named .item, which is highly complex.. I want to change the hover color only without copying all the class name to a another name just to change the hover color. What is the easist way to change the color 000000 to FC0000?

.item-test a.hover .thumb {
    border-bottom-color: #000000;
    border-bottom-style: solid;
    border-bottom-width: 5px;
    border-left-color-ltr-source: physical;
    border-left-color-rtl-source: physical;
    border-left-color-value: #000000;
    border-left-style-ltr-source: physical;
    border-left-style-rtl-source: physical;
    border-left-style-value: solid;
    border-left-width-ltr-source: physical;
    border-left-width-rtl-source: physical;
    border-left-width-value: 5px;
    border-right-color-ltr-source: physical;
    border-right-color-rtl-source: physical;
    border-right-color-value: #000000;
    border-right-style-ltr-source: physical;
    border-right-style-rtl-source: physical;
    border-right-style-value: solid;
    border-right-width-ltr-source: physical;
    border-right-width-rtl-source: physical;
    border-right-width-value: 5px开发者_运维技巧;
    border-top-color: #000000;
    border-top-style: solid;
    border-top-width: 5px;
    overflow-x: hidden;
    overflow-y: hidden;
}


Just add a new CSS definition:

.item-test a.hover .thumb:hover {
    border-color: #FC0000;
}

The selector used here, .item-test a.hover .thumb:hover is more specific than the one used above (because it has an additional pseudo class), hence it will have priority over it. See CSS 2 – The Cascade.


That is probably the least efficient CSS I've ever seen...

.item-test a.hover .thumb{
    border: 5px solid #000;
    overflow:hidden;
}

Would do the same thing.

To make a change for hover, you would just do:

.item-test a.hover .thumb:hover{
    border-color:#FC0000;
}

However, some browsers do not support the :hover psuedo class unless it is an achor. Fortunately it seems as though you have a .thumb nested in an achor, so you should instead do this to assure full compatability:

.item-test a:hover .thumb:hover{
    border-color:#FC0000;
}
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜