CSS: Change Background Color on Hover

Question

I've searched other questions, and the solutions I've found don't work.

Here's the deets: Webpage has a .side_nav . There are 4 elements to that . Each has a small img, an h2, and a p.

I'd like for the links to have a lighter color when hovered. I feel as if I'm missing something small...

I'm using DW:CC, and interestingly enough, it does not show the normal background in the in "Live" view. It does, however, show the :hover action in "Live" view, just not in any of the browsers I've tried.

HTML:

<nav class="fluid side_nav">
    <div> <a href="#"> <img src="images/images.jpg" alt=""/>
        <h2>Estimates</h2>
        <p>Click here for an estimate</p>
        </a></div>
    <div> <a href="#"> <img src="images/images.jpg" alt=""/>
        <h2>Repairs</h2>
        <p>Click here for an estimate</p>
    </a></div>
    <div> <a href="#"> <img src="images/images.jpg" alt=""/>
        <h2>Maintenance</h2>
        <p>Click here for an estimate</p>
    </a></div>
    <div> <a href="#"> <img src="images/images.jpg" alt=""/>
        <h2>Specials</h2>
        <p>Click here for an estimate</p>
    </a></div>
</nav>

Then, the CSS:

.side_nav {
    clear: both;
    margin-top: 10px;
    margin-bottom: 10px;
}
.side_nav img {
    height: 35px;
    padding-right: 15px;
    float: left;
}
.side_nav a {
    display: block;
    border: 1px solid #151515;
    margin-bottom: 8px;
    border-radius: 8px;
    padding-top: 8px;
    padding-right: 8px;
    padding-bottom: 8px;
    padding-left: 8px;
    -webkit-box-shadow: 4px 2px 6px #8E8E8E;
    box-shadow: 4px 2px 6px #8E8E8E;
    background-image: -webkit-linear-gradient(0deg,rgba(40,121,216,1.00) 0%,rgba(25,77,138,1.00) 99.48%);
    background-image: -moz-linear-gradient(0deg,rgba(40,121,216,1.00) 0%,rgba(25,77,138,1.00) 99.48%);
    background-image: -o-linear-gradient(0deg,rgba(40,121,216,1.00) 0%,rgba(25,77,138,1.00) 99.48%);
    background-image: linear-gradient(90deg,rgba(40,121,216,1.00) 0%,rgba(25,77,138,1.00) 99.48%);
    color: #FFFFFF;
}
.side_nav a:hover {
    background-color: #3374C2;
}

Any tips?

You're using background-image which layers on top of the color. Remove the background-image and you should be good to go. — André Dion
– André Dion, Commented Nov 29, 2013 at 15:59

SW4 · Accepted Answer · 2013-11-29 16:00:17Z

17

You have background-image already set, which supercedes color. Change the your CSS to just use background:

.side_nav a:hover {
    background: #3374C2;
}

FIDDLE

answered Nov 29, 2013 at 16:00

SW4

71.5k20 gold badges137 silver badges140 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Geraux Over a year ago

Ah, so you're saying I can't use a gradient color, then have it change on :hover? I'll give it a shot.

SW4 Over a year ago

You can- but you have to change either the bg-img or bg-col property (or just generic bg). To replace the gradient with another gradient, change the bg-img property on :hover with values similar to the ones you've used for the a class

Geraux Over a year ago

You're a champ! Thanks!

codingrose · Accepted Answer · 2013-11-29 16:00:59Z

5

Write:

.side_nav a:hover {
    background: #3374C2; //background instead of background-image
}

Fiddle here.

answered Nov 29, 2013 at 16:00

codingrose

15.7k11 gold badges41 silver badges58 bronze badges

Collectives™ on Stack Overflow

CSS: Change Background Color on Hover

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related