Title: Hover help
Last modified: August 11, 2020

---

# Hover help

 *  Resolved [webs101](https://wordpress.org/support/users/webs101/)
 * (@webs101)
 * [5 years, 9 months ago](https://wordpress.org/support/topic/hover-help-2/)
 * I have almost got everything working the way I want it but I need some guidance
   in getting the link hover the way I want it on the post page.
 * I have the following CSS to get the colours on a:hover (and some other stuff)
   the way I want it on the main page:
 *     ```
       body {
         color: #A20202;
       }
   
       #page {
         background-color: #aab386;
       }
   
       h1 {
       	color: #5B6048;
       }
   
       .entry-title a:hover {
         text-decoration: underline;
         color: #A20202;
       }
   
       .site-title a:hover {
         text-decoration: underline;
         color: #A20202;
       }
   
       .entry-footer a:hover {
         text-decoration: underline;
         color: #A20202;
       }
   
       .site-footer a:hover {
         text-decoration: underline;
         color: #A20202;
       }
   
       a {
         text-decoration: none;
         color: #5B6048;
       }
   
       a:visited {
         color: #5B6048;
       }
   
       a:hover {
         text-decoration: underline;
         color: #A20202;
       }
   
       blockquote {
           border-left: 3px solid #0074d9;
         color: #a20202;
       	font-size: 85%;
       	line-height: 1.5;
         font-style: italic;
       	border-left:1px dotted #D4D7CA;
        	 margin: 10px 10px 10px 50px;
         padding: 5px 5px 5px 28px;
       }
       ```
   
 * But I cannot figure out how to get those same effects on the past pages for links
   applied to the Previous and Next posts and the hover colour of the Post Comment
   button at the bottom.
 * Here’s the div that contains one of the post titles. The other is similar:
 *     ```
       <div class="nav-next">
       <a href="https://101squadron.com/blog/2015/05/genius-steals.html" rel="next">
       <span class="meta-nav" aria-hidden="true">Next</span> 
       <span class="screen-reader-text">Next post:</span> 
       <span class="post-title">Genius steals</span></a>
       </div>
       ```
   
 * Thanks.
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fhover-help-2%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

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

 *  Moderator [James Huff](https://wordpress.org/support/users/macmanx/)
 * (@macmanx)
 * [5 years, 9 months ago](https://wordpress.org/support/topic/hover-help-2/#post-13239766)
 * Via Additional CSS in your Customizer, add:
 *     ```
       .post-navigation .post-title:hover {
         text-decoration: underline;
         color: #A20202;
       }
       ```
   
 *  Thread Starter [webs101](https://wordpress.org/support/users/webs101/)
 * (@webs101)
 * [5 years, 9 months ago](https://wordpress.org/support/topic/hover-help-2/#post-13243934)
 * That did not work.
 *  Moderator [James Huff](https://wordpress.org/support/users/macmanx/)
 * (@macmanx)
 * [5 years, 9 months ago](https://wordpress.org/support/topic/hover-help-2/#post-13246840)
 * Hm, try this:
 *     ```
       .post-navigation .post-title:hover {
         text-decoration: underline !important;
         color: #A20202 !important;
       }
       ```
   
 *  Thread Starter [webs101](https://wordpress.org/support/users/webs101/)
 * (@webs101)
 * [5 years, 9 months ago](https://wordpress.org/support/topic/hover-help-2/#post-13247260)
 * That sort of works. I get the proper hover colour when I mouseover the post title,
   but if I hover over the “Previous” or “Next” links, the post title will change
   to use the default hover colour.
 * It’s three spans inside one link. I just can’t figure it out.
 *  Moderator [James Huff](https://wordpress.org/support/users/macmanx/)
 * (@macmanx)
 * [5 years, 9 months ago](https://wordpress.org/support/topic/hover-help-2/#post-13253427)
 * Hm, you’re right, that’s a bit too deep to target effectively. These older themes
   aren’t as easy to customize this way.
 *  [Gary Bairead](https://wordpress.org/support/users/gary-barrett/)
 * (@gary-barrett)
 * [5 years, 9 months ago](https://wordpress.org/support/topic/hover-help-2/#post-13253507)
 * Hi there,
 * Please try adding the CSS below to the Customizer.
 * It seems to work on my end.
 *     ```
       .nav-next a:hover *,
       .nav-previous a:hover * {
           color: #A20202 !important;
       }
       ```
   
 * Animated Screenshot of how it should work:
    [⌊Nav links⌉](https://cloudup.com/c6XCBvK83Tj)
    -  This reply was modified 5 years, 9 months ago by [Gary Bairead](https://wordpress.org/support/users/gary-barrett/).
      Reason: fixed image embed
 *  Thread Starter [webs101](https://wordpress.org/support/users/webs101/)
 * (@webs101)
 * [5 years, 9 months ago](https://wordpress.org/support/topic/hover-help-2/#post-13253602)
 * Thanks so much, Gary!
 *  [Gary Bairead](https://wordpress.org/support/users/gary-barrett/)
 * (@gary-barrett)
 * [5 years, 9 months ago](https://wordpress.org/support/topic/hover-help-2/#post-13253741)
 * You’re welcome, glad I could help 🙂
 *  Moderator [James Huff](https://wordpress.org/support/users/macmanx/)
 * (@macmanx)
 * [5 years, 9 months ago](https://wordpress.org/support/topic/hover-help-2/#post-13258983)
 * Thanks, Gary!

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

The topic ‘Hover help’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/colinear/1.0.2/screenshot.png)
 * Colinear
 * [Support Threads](https://wordpress.org/support/theme/colinear/)
 * [Active Topics](https://wordpress.org/support/theme/colinear/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/colinear/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/colinear/reviews/)

 * 9 replies
 * 3 participants
 * Last reply from: [James Huff](https://wordpress.org/support/users/macmanx/)
 * Last activity: [5 years, 9 months ago](https://wordpress.org/support/topic/hover-help-2/#post-13258983)
 * Status: resolved