悬停状态的CSS边框

Question

Essentially i have a pricing table with the class of .priceblock , and i have a border-bottom on my <li> tags, i simply want it to change color when i hover on the priceblock . The code to me seems correct but nothing changes.

Heres the initial li tag:

ul.pricingtable .priceblock .contents li {
    font-family: 'OpenSans';
    font-size: 13px;
    width: 81.904762%;
    height: 35px;
    margin:0 auto;
    padding: 10px 0;
    border-bottom: 1px solid rgba(221,221,221,1);
}

And here hover state css code, this hover class works for he coloring of texts, but i can't change the border color.

.priceblock:hover .contents li {
    border-color: rgba(255,117,109,1);
}

Any ideas?

Answer 1

I think you might need to change the hover state from.

    .priceblock:hover .contents li {
    border-color: rgba(255,117,109,1);
    }

To:

.contents li:hover {
    border-bottom: 1px solid rgba(255,117,109,1);
}

HTML may be able to read it better.

Answer 2

The css attributes need to be equals.

for example:

If in the first style block you write "ul.pricingtable" then you need to do that in the second block two.

And in the content of block, they need to be same.

for example:

border-bottom: 1px solid rgba(221,221,221,1);

and

border-bottom: 1px solid rgba(255,117,109,1);

You cann'ot use once with "border-bottom" and then with "border-color" only...