CODEWITHSUNDEEP
css
MattM
MattM

Reputation: 3217

CSS - Change background color of div on hover state

If you go to this page: http://www.inventivewebdesign.com/renohifi/listings_portfolio/pass-labs-xa-160-8-monoblock-power-amps/

And look at the bottom under Related Products, you will see a list of images and product titles. When you hover your mouse over one, the image grays out and a white box appears around the product title below the image. I need to make this white box go away and I can't find out what is causing it in CSS.

I've tried the following CSS:

.car-block a:hover >.car-block-bottom h2 {
     background: rgb(0, 0, 92) none repeat scroll 0 0 !important;
}
.car-block, .car-block:hover, .car-block:hover .car-block-bottom {
    background-color:  rgb(0, 0, 92) !important;
}

.car-block .car-block-bottom h2 {
    font-weight: bold;
    font-size: 16px;
    margin: 0px;
    margin-top: 10px;
    padding: 2px;
    color: #fff;
    background-color:  rgb(0, 0, 92) !important;
}

.car-block-bottom {
    display: block;
    padding: 6px 5px 10px;
    text-align: center;
    transition-duration: 0.2s;
    transition-property: all;
    background-color:  rgb(0, 0, 92) !important;
}

Any help would be appreciated.

Upvotes: 1

Views: 100

Answers (1)

hoangkianh
hoangkianh

Reputation: 649

Try it to override the white background of .car-block-bottom

.car-block, .car-block:hover, .car-block:hover .car-block-bottom.car-block-bottom {
    background-color:  rgb(0, 0, 92) !important;
}

Upvotes: 1

Related Questions