Jump to content

Trouble changeing the background of a div


Recommended Posts

I'd like to change the background of a selected item in the basic template.  Whenever a person hovers over an item in the catalog I'd like the background to to be something other than white.  Can someone tell me how to do this? See attachment.

post-1220851-0-27402800-1461378937_thumb.png

Share this post


Link to post
Share on other sites

It's closer... I think.  Here is the code I have and the results I'm getting.

 

@media ( min-width : 1200px) {
    ul.product_list.grid>li.hovered .product-container {
        -moz-box-shadow: rgba(0, 0, 0, 0.17) 0 0 13px;
        -webkit-box-shadow: rgba(0, 0, 0, 0.17) 0 0 13px;
        box-shadow: rgba(0, 0, 0, 0.17) 0 0 13px;
        position: relative;
        z-index: 10;
        background: #000;
    }
    ul.product_list.grid>li.hovered .product-container .content_price {
        display: none;
        background: #000;
    }
    ul.product_list.grid>li.hovered .product-container .product-image-container .content_price
        {
        display: block;        
        background: #000;
    }
    ul.product_list.grid>li.hovered .product-container .product-image-container .quick-view
        {
        display: block;        
        background: #000;
    }
    ul.product_list.grid>li.hovered .product-container .functional-buttons,
        ul.product_list.grid>li.hovered .product-container .button-container,
        ul.product_list.grid>li.hovered .product-container .comments_note {
        display: block;        
        background: #000;
    }
}

 

Capture.PNG

Share this post


Link to post
Share on other sites

Thanks, I found what I was looking for in the themeX.css.  I happen to be using theme4.css. Editing the background element was the solution.

 

For me this is line 170.

ul.product_list.grid > li .product-container:hover {
  background: #fff; /* THIS IS THE LINE TO BE MODIFIED */
  -webkit-box-shadow: 0 5px 13px rgba(0, 0, 0, 0.17);
  -moz-box-shadow: 0 5px 13px rgba(0, 0, 0, 0.17);
  box-shadow: 0 5px 13px rgba(0, 0, 0, 0.17);
}

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More