Docs

[Pamela]

Hi all,

I am using the following custom CSS for hovering and it works on all links, but I don’t want it to apply to buttons or images. I can’t seem to construct the proper code to do that.

Can you please help?

body .x-main a:not(.x-btn) {
text-decoration:none;
border-bottom: 1px solid #e5e5e5;
box-shadow: inset 0 -4px 0 #e5e5e5;
color: #e5e5e5;
transition: background 0.1s cubic-bezier(.33,.66,.66,1);
}

body .x-main a:hover {
background: #e5e5e5;
}

Links and credentials are in next post.

Thank you for your help in advance!

[Pamela]

This reply has been marked as private.

[Nabeel A]

Hi again,

Thanks for writing around! You can replace the following code:

body .x-main a:hover {
    background: #e5e5e5;
}

With the following code:

body .x-main a:not(.x-btn):hover {
    background: #e5e5e5;
    color: black;
}

Let us know how this goes!

[Pamela]

Thanks, that worked for the buttons!

Can you please also help so that the images on this page don’t change when hovered?
http://westsidevirtualwebdesign.com/deals-discounts-specials/

Thank you so much!

[Friech]

Hi There,

Add this on your Custom CSS on Customizer

body .x-main a:not(.x-btn):hover {
	background-color: transparent !important;
}

Thanks.

[Pamela]

That didn’t work, that removed the effect I had on text.

Here is a screenshot of the effect I currently have that is working. It also works correctly on buttons.
I want an underline under link text when not hovered, and a background when it is hovered.

Buttons render correctly. I just don’t want that effect on images.

Thank you for all your help again in advance, very much appreciated.

[Rue Nel]

Hello There,

Thanks for updating in! Could you please update the given login credentials? We seem not to be able to login anymore. We just want to make sure that we give your a tailored css right for your buttons.

Hope to hear from you.

[Pamela]

This reply has been marked as private.

[Rue Nel]

Hello Again,

To remove the hover effect in the images, please add the following css code in the customizer, Appearance > Customize > Custom > Edit Global CSS

body .x-main a.x-img-link { 
  border-bottom: none!important;
  box-shadow: none !important;
  text-decoration:none;
}

Hope this helps. Please let us know how it goes.

[Pamela]

That did the trick Rue! Thank you so much for your superb support!

You can close this thread.

Thank you again!

[Rue Nel]

Hello There,

You’re most welcome! We appreciate for letting us know that it has been useful to you.
If you need anything else we can help you with, don’t hesitate to open another thread.

Cheers.

[Author]

Posts