Help with css hover

HTML & CSS
1

Hello,

I am using the following code to apply a box around some text.

.box H3 {
BORDER-RIGHT: #DDDDDD 1px solid; PADDING-RIGHT: 32px; BORDER-TOP: #DDDDDD 1px solid; PADDING-LEFT: 32px; FONT-SIZE: 100%; PADDING-BOTTOM: 5px; MARGIN: 3px; BORDER-LEFT: #DDDDDD 1px solid; PADDING-TOP: 5px; BORDER-BOTTOM: #DDDDDD 1px solid
}

I want to make it so that when the cursor hovers over the box, the background changes to #005173, the border changes to #000000, and the text turns to #ffffff.

Any help would be appreciated.

Thanks

2 

.box h3{
	background-color: #D7E5F2; 	
	border: 1px solid #005173;
	font-size: 100%; 
	margin: 3px;
	padding: 5px 32px;
	
}	
.box:hover h3{
	background-color: #005173;
	border-color: #000000;
	color: #ffffff;
}

a) Do NOT capitalize your properties. It’s bad form.
b) Group like properties. Even if you separate out your borders into top-right-bottom-left, keep all of them TOGETHER.
c) Use the shorthand notation for things like margin, padding, borders, backgrounds.

3

Thanks a ton! This is great.

I also want to put a little image in the box (aligned to the very right).

And when the cursor hovers over the box, that image would change color.

I have both images ready, but I’m not sure what the code would be.

Thanks again

4

Figured it out on my own… thanks

5 

.box h3{
    background-color: #D7E5F2;  
    border: 1px solid #005173;
    font-size: 100%;
    margin: 3px;
    padding: 5px 32px;
   
    background-image: url("") no-repeat;
    background-position: right center;
}   
.box:hover h3{
    background-color: #005173;
    border-color: #000000;
    color: #ffffff;

    background-image: url("") no-repeat;
    background-position: right center;
}

Make sure to enter the path inside of the url(“”) for each separate image. You may have to adjust the padding of the h3 element, and change the background position. Google background position CSS if you need to learn more about it.