Adding border on product hover

  • Resolved dfwpress

    (@dfwpress)


    5 years ago

    Hello,

    I am use this CSS to add border to product hover (on loop):

    ul.products li.product :hover   
{ 
border-style: solid ;
border-width: 1px ;
	border-color: #708 ;
}

    But please is there any simple solution to exclude borders inside box (image, title, price)? I would like that remains only border outside of box.

    Thank you

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Support Gabriel – a11n

    (@gabrielfuentes)

    5 years ago

    Hi there 👋

    Could you please share a link to your site so that I can check if I can generate that custom CSS code for you?

    Cheers!

    Thread Starter dfwpress

    (@dfwpress)

    5 years ago

    alatmix.ba

    Thread Starter dfwpress

    (@dfwpress)

    5 years ago

    The theme is Storefront

    Plugin Support Gabriel – a11n

    (@gabrielfuentes)

    5 years ago

    Great! This can be fixed with some custom CSS. Under Customize > Additional CSS, replace the previous code and the following one:
     

    /* Add border to product */
ul.products li.product a:hover {
    border-style: solid;
    border-width: 1px;
    border-color: #708;
}

     
    If you’d like to learn more about CSS, I highly recommend using the free tutorials at w3schools. Here, you can find the basics of selectors (how to target the right element on the page), and properties (how to change the element on the page).

    Cheers 🙂

    Thread Starter dfwpress

    (@dfwpress)

    5 years ago

    OK
    Thank you

    Plugin Support Gabriel – a11n

    (@gabrielfuentes)

    5 years ago

    Happy to help 😃

    Great! If you have any further questions, you can start a new thread.

    Cheers.

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Adding border on product hover’ is closed to new replies.