How to change the color of content

HTML & CSS
1

How do I change the color of our content that highlights on mouseover. (Where it says “$0.97/month” and all the content below that.) The websites at: www.97centhosting.com

Thanks

2

I don’t know how specific your .span3{} class is (if you reuse it elsewhere that you dont want hover…but look at this

.span3:hover * { background:yellow;}

You can get the hint from there…if you want to target specific text or a class then remove the * and go from there…should be enough for you to go off of, yes?

3

you better use pseudo classes . Link here:
_ http://www.w3schools.com/css/css_pseudo_classes.asp
use :hover to change color of your content

4

Where it says $0.97 within the blue dot, I want to change that background color from blue to another color how do I do it?

Thanks

5

The blue background is set on “.price-label”. So just change the background color on the property.

6

How do you change the blue mouse over hover outline on the “Hosting Plan” box?

Thanks

7

Change this style—which is embedded on the page at line 684:

.pricing:hover {
border: 2px solid #3498DB;
}
8

OK I changed the color of the boxes. I made separate CSS for each box. (3 boxes total) How do I change the color of the “$14.97/year” blue dot? because it wont change with the new CSS.

The websites at: www.97centhosting.com

Thanks

9

I already gave you the answer - .price-label{} holds this. Is the online example current? All 3 circles are .price-label{}…

11

I changed the .price-label and the colors are not changing on them. How do you change them? You can see an update at http://www.97centhosting.com

Also theirs bullets next to all the text now. (Right next to Domain Registration and the rest of the text.) How do you get rid of them?

Thanks

12

You aren’t changing it.

  .price-label {
        background: #3498db;
        width: 70px;
        height: 48px;
        padding: 21px 10px;
        font-size: 20px;
        color: #fff;
        font-weight: 600;
        line-height: 1em;
        text-align: center;
        position: absolute;
        top: -110px;
        left: 50%;
        margin-left: -49px;
        border: 4px solid #fff;
        -webkit-border-radius: 90px;
        -moz-border-radius: 90px;
        border-radius: 90px;
    }

If I change that background-color to red, the circles change.

13

If you look at .pricing2 and .pricing3 just below that you will see I changed .price-label2, .price-label3 to a different color but it did not work. (“$14.97/year”, and “$4.97/month”)

Thanks

14

All 3 circles are price-label. I see that you have changed a .pricing2 and .pricing3 (not the elements you mentioned but it’s the closest thing) which is not the circle code. That changed the border color around the pricing details…but as I said, the circle is all .pricing-label. You did not differentiate the 3 circles. You gave the same class to all 3.

15

How to you change them to make the color change on .pricing2 and .pricing3. Do I need to change something?

Thanks

16

To keep everything neat, I’d copy .pricing-label CSS and name the copies .pricing-label2{} and .pricing-label3{} nad put the new background color on that. You’d have to change the HTML to match.

17

How do you get rid of the bullets beside all the text in the second and third “$14.97/year”, “$4.97/month” box?

Thanks

18

On this rule

.list-checkmark, .myunstyled, .inline-right, .inline-left, .blocked-links, .social, .pricing table ul

Add in .pricing2 table ul, and .pricing3 table ul. Below is what it should look like

.list-checkmark, .myunstyled, .inline-right, .inline-left, .blocked-links, .social, .pricing table ul, .pricing2 table ul, .pricing3 table ul{}
19

.pricing2 table ul and .pricing3 table ul already exist.

.pricing2 table ul {
display: block;

and

.pricing3 table ul {
display: block;

Thanks

20

Remove those two blocks of code. UL’s are already block by default.

And you still need to do what I said.