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;
}
精彩评论