Title: Hover Effect Last modified: August 30, 2016 --- # Hover Effect * Resolved [1mk](https://wordpress.org/support/users/1mk/) * (@1mk) * [10 years, 9 months ago](https://wordpress.org/support/topic/hover-effect-10/) * on my site posts I have the hover effect set up…I noticed however that with my social sharing buttons it does the same hover effect and on ads I have in the post when you hover of the post it shows up too…is there a way I can fix it so the hover effect only applies to text and not to my social share buttons and my ads in the post? * Thanks, * MK Viewing 15 replies - 1 through 15 (of 22 total) 1 [2](https://wordpress.org/support/topic/hover-effect-10/page/2/?output_format=md) [→](https://wordpress.org/support/topic/hover-effect-10/page/2/?output_format=md) * [hannah](https://wordpress.org/support/users/hannahritner/) * (@hannahritner) * [10 years, 9 months ago](https://wordpress.org/support/topic/hover-effect-10/#post-6250141) * Hey, Please post a link. Thanks, Hannah * Thread Starter [1mk](https://wordpress.org/support/users/1mk/) * (@1mk) * [10 years, 9 months ago](https://wordpress.org/support/topic/hover-effect-10/#post-6250145) * This is one post that shows that issue: * [http://yourpathtohealthyliving.com/can-high-protein-diets-help-you-lose-weight/](http://yourpathtohealthyliving.com/can-high-protein-diets-help-you-lose-weight/) * Thanks, * MK * [hannah](https://wordpress.org/support/users/hannahritner/) * (@hannahritner) * [10 years, 9 months ago](https://wordpress.org/support/topic/hover-effect-10/#post-6250151) * Try adding this to your custom css box in theme options: * ``` .addtoany_list.a2a_kit_size_32 a:hover { background-color: #eee !important; } .yarpp-thumbnails-horizontal .yarpp-thumbnail:hover { background-color: #eee !important; } ``` * Hope that helps! Hannah * Thread Starter [1mk](https://wordpress.org/support/users/1mk/) * (@1mk) * [10 years, 9 months ago](https://wordpress.org/support/topic/hover-effect-10/#post-6250156) * Great! Thanks! * Also, how can make the background of the social sharing buttons white…right now it’s still greyish color… * For the yarpp related posts…when I hover over it, it’s all grey…can I have it so the background is white and when I hover over it the text is blue and the text remains greyish when not hovered over? * Can I also do that with the ads that run at the top of the post…remove the hover effect and the grey background that borders the ads? * [hannah](https://wordpress.org/support/users/hannahritner/) * (@hannahritner) * [10 years, 9 months ago](https://wordpress.org/support/topic/hover-effect-10/#post-6250167) * 1. * ``` .addtoany_list.a2a_kit_size_32 a { background-color: #fff !important; } ``` * 2. The background already turns white when I hover? You can use this to change the text on hover: * ``` .yarpp-related .yarpp-thumbnail-title:hover { color: #025fa9 !important; } ``` * 3. * ``` .g-4 .post .entry-content a { background: transparent; } ``` * Hope that helps! Hannah * Thread Starter [1mk](https://wordpress.org/support/users/1mk/) * (@1mk) * [10 years, 9 months ago](https://wordpress.org/support/topic/hover-effect-10/#post-6250183) * Thanks. * The grey border and hover around the ads at the top of the post are still there… I would like that to be white/transparent. * Also, the grey border around the related posts yarpp is still there as well…I would like that to be white/transparent. * [Ben Ritner – Kadence WP](https://wordpress.org/support/users/britner/) * (@britner) * [10 years, 9 months ago](https://wordpress.org/support/topic/hover-effect-10/#post-6250186) * You seem to be adding this css: * ``` .post .entry-content a { padding: 6px 12px; background: #eee; ``` * That is too vague.. it is causing your issue above. What are you trying to target? * Kadence Themes * Thread Starter [1mk](https://wordpress.org/support/users/1mk/) * (@1mk) * [10 years, 9 months ago](https://wordpress.org/support/topic/hover-effect-10/#post-6250190) * If you look at this post: * [http://yourpathtohealthyliving.com/can-high-protein-diets-help-you-lose-weight/](http://yourpathtohealthyliving.com/can-high-protein-diets-help-you-lose-weight/) * I want to get rid of the grey around the related posts and I want to get rid of the grey and blue hover around the ads that are in the posts. * [Ben Ritner – Kadence WP](https://wordpress.org/support/users/britner/) * (@britner) * [10 years, 9 months ago](https://wordpress.org/support/topic/hover-effect-10/#post-6250192) * yes I know that. I’m saying that the only reason it’s there is because of the css you are adding above. and it’s better to fix that then to add more css to undo what you are adding above. * Kadence Themes * Thread Starter [1mk](https://wordpress.org/support/users/1mk/) * (@1mk) * [10 years, 9 months ago](https://wordpress.org/support/topic/hover-effect-10/#post-6250193) * oh okay. * How do I fix that? * Just delete it? * Because I do want the hover effect for the previous and next post and any link to further content. * Just want it gone from the latest post and ads etc. * Thread Starter [1mk](https://wordpress.org/support/users/1mk/) * (@1mk) * [10 years, 9 months ago](https://wordpress.org/support/topic/hover-effect-10/#post-6250195) * When I deleted the vague css, it did fix those two issues, but it also reverted the links at the bottom of the post linking to the original article to a hyperlink and not a button… * Same happened to the ‘continue’ link for the posts that appear when you click on either ‘category’ or ‘archive’ * [Ben Ritner – Kadence WP](https://wordpress.org/support/users/britner/) * (@britner) * [10 years, 9 months ago](https://wordpress.org/support/topic/hover-effect-10/#post-6250202) * So if you change that css to have .postlist it will know to target only the readmore on the postlist. * ``` .postlist .post .entry-content a { background: #eee; padding: 5px 10px; color: #444; margin: 5px; display: inline-block; } ``` * Thread Starter [1mk](https://wordpress.org/support/users/1mk/) * (@1mk) * [10 years, 9 months ago](https://wordpress.org/support/topic/hover-effect-10/#post-6250203) * can I make it so when I hover over it the button changes to blue? * Also, can I make a button for any hyperlink that I have in my posts… * [http://yourpathtohealthyliving.com/cold-temperatures-and-chili-peppers-help-burn-fat/](http://yourpathtohealthyliving.com/cold-temperatures-and-chili-peppers-help-burn-fat/) * [hannah](https://wordpress.org/support/users/hannahritner/) * (@hannahritner) * [10 years, 9 months ago](https://wordpress.org/support/topic/hover-effect-10/#post-6250205) * 1. Try this css to change the background on hover: * ``` .postlist .post .entry-content a:hover { background: #025fa9; } ``` * 2. Try this: * ``` .single-post a, a:visited { background: #eee; padding: 5px 10px; color: #444; margin: 5px; display: inline-block; } ``` * Is that what you mean? * Hannah * [Ben Ritner – Kadence WP](https://wordpress.org/support/users/britner/) * (@britner) * [10 years, 9 months ago](https://wordpress.org/support/topic/hover-effect-10/#post-6250209) * > Also, can I make a button for any hyperlink that I have in my posts… * Use the button shortcode. Don’t make every link a button you will end up with issues as before. If you want to add a button in your content just add a button using the theme shortcodes. * Kadence Themes Viewing 15 replies - 1 through 15 (of 22 total) 1 [2](https://wordpress.org/support/topic/hover-effect-10/page/2/?output_format=md) [→](https://wordpress.org/support/topic/hover-effect-10/page/2/?output_format=md) The topic ‘Hover Effect’ is closed to new replies. * ![](https://i0.wp.com/themes.svn.wordpress.org/virtue/3.4.14/screenshot.png) * Virtue * [Support Threads](https://wordpress.org/support/theme/virtue/) * [Active Topics](https://wordpress.org/support/theme/virtue/active/) * [Unresolved Topics](https://wordpress.org/support/theme/virtue/unresolved/) * [Reviews](https://wordpress.org/support/theme/virtue/reviews/) * 22 replies * 3 participants * Last reply from: [1mk](https://wordpress.org/support/users/1mk/) * Last activity: [10 years, 9 months ago](https://wordpress.org/support/topic/hover-effect-10/page/2/#post-6250234) * Status: resolved