Need help? Check out our Support site, then


Hover Effekt don't work right

  1. Hi,

    im using the sorbet theme (with custom css upgrade) and i wanted to change the color of the post titles from red to grey. It worked fine, but now the hover effekt dont work the right way. it shows the link color (red) only for a short time even it i stay on the link. Links in posts work normal and show the red color als long as i stay in the link. Whats wrong?

    http://tintenmeer.wordpress.com/

    The blog I need help with is tintenmeer.wordpress.com.

  2. Hi there, it looks like you have gotten this taken care of. I viewed your site in Firefox, Safari and Chrome and the red hover color is staying solid.

  3. Hi,

    im sorry, i didnt answered. >.< I'll tried all three Browser (FF, Safari, IE): The hover effect must show from grey to (when hoved) green. In IE it seems to work. In FF not. Its the newest Version.

    But i found another - worser - problem: I cannot use the post formats, because if i use another one than standard, the link interrupts the links of my navigation menue. Is this a problem of the theme? what can i do?

  4. I cannot use the post formats, because if i use another one than standard, the link interrupts the links of my navigation menue. Is this a problem of the theme? what can i do?

    I'm not quite sure what you mean by interrupting the links in your menu. Could you take a screenshot of the problem so we can have a look?

    Here's a guide on how to make a screenshot, if you're not sure: http://en.support.wordpress.com/make-a-screenshot/

    You can upload the screenshot - in a graphic format like JPG, PNG, or PDF - in your Media Library so I can see it. Thanks.

  5. To make it so the post titles don't change color when you hover on them in the Sorbet theme, you can add this to your Appearance > Customize > CSS editor:

    .entry-title a:hover {
    	color: #9ba2af;
    }

    Can you give that a try and let me know if it doesn't work for you?

  6. But i found another - worser - problem: I cannot use the post formats, because if i use another one than standard, the link interrupts the links of my navigation menue. Is this a problem of the theme? what can i do?

    I tried testing this with my own blog by setting the theme to Sorbet and making the latest post a quote post format. I was able to reproduce the problem and I reported it to our theme developers for review.

    Thanks for finding that! It's a strange and kind of hard to spot bug. I noticed that if you hover just to the right of anywhere that overlaps with the post format icon circle, then the submenus work normally in case that's helpful to know before the bug can be reviewed.

  7. Hi,

    thanks for your help! But my problem with the link hover still exist. This is my css-code:

    .entry-title a:hover {
    color: #8bd9ba;
    }

    .entry-title {
    color: #9ba2af;
    }

    a, a:visited,.entry-title a, .entry-title a:visited {
    color: #9ba2af;
    }

    a {
    color: #F77E75;
    }

    I know something is wrong with it. When i erase the "a, a:visited ..."-part, the hover effect works right, but than the entry title is in red color. Maybe because its a link. But i want it to be grey. Can you help with this?

  8. In your example, you don't have the CSS I gave you earlier.

    I your example, you have this:

    .entry-title a:hover {
    color: #8bd9ba;
    }

    That will make post titles on the home page turn green (the color #8bd9ba) if you hover over them. If you want to make the post titles stay gray when you hover over them, then you should set the color for ".entry-title a:hover" to #9ba2af instead of #8bd9ba

  9. Okay. Normally in this theme the title is red because its a link. I want it to be grey and go green, when i hover on it. The problem is: its grey (like i want it) and when i hover it only flares green for a half second and than it changes back to grey.

  10. It stays green for me and I am using Firefox 30.

  11. The problem is: its grey (like i want it) and when i hover it only flares green for a half second and than it changes back to grey.

    Oh! I thought you wanted it to stay gray because of this:

    i wanted to change the color of the post titles from red to grey. It worked fine, but now the hover effekt dont work the right way. it shows the link color (red) only for a short time even it i stay on the link

    And also because you said this:

    the hover effect works right, but than the entry title is in red color. Maybe because its a link. But i want it to be grey.

    You never mentioned that you wanted it to stay green before. :)

    I took a closer look at your CSS and I think I found part of the problem. Let's look at this section from your custom CSS:

    .entry-title a:hover {
    	color: #8bd9ba
    }
    .entry-title {
    	color: #9ba2af
    }
    a, a:visited, .entry-title a, .entry-title a:visited {
    	color: #9ba2af
    }

    The first rule sets the hover color to green for post titles that are also linked (such as on the home page). The second rule sets post titles on individual posts (not the home page) to gray. The third rule sets links, visited links, linked post titles, and visited link post titled to gray.

    What that means is that if you have visited the link before in your current browser session (the :visited part), then the link will be gray.

    In CSS, :visited is more specific than :hover, so that's why some of the links are staying gray for you but are green on hover for other people who haven't yet visited some of the individual posts yet. If you're interested in the reasons behind this, this post explains the issue in a lot of detail: http://meyerweb.com/eric/css/link-specificity.html

    Basically, the :visited and :hover rules have to be in the right order, and you had them in the wrong order.

    I think you can fix the problems you were having with the red link turning to green by first removing all of the CSS related to heading colors from your current custom CSS and then adding this instead:

    a, .entry-title a {
    	color: #9ba2af;
    }
    
    a:visited, .entry-title a:visited {
    	color: #9ba2af;
    }
    
    a:hover, .entry-title a:hover {
    	color: #8bd9ba;
    }
  12. Hi,

    oh i'm sorry for that mistake. Maybe I'm also a bit confused with this and wrote the wrong color. Thank you for your help. I changed the css-code. Now my problem still exists for Firefox (30) but with internet explorer it worked. I have no idea, but okay. Maybe with next updates or something it will be working.

  13. I found a strange think ... now it seems that this problem only affects the first post. Others work now with the right hover effect. Maybe it corresponds with the theme post format problem, i described bevor.

  14. my problem still exists for Firefox (30)

    You didn't make the CSS change I recommended. Can you try it? See my last reply.

  15. Another thing you can do is test your CSS a bit at a time. That might help you understand the problem better. To do that, try these steps:

    1. Remove all current CSS and save it in a backup

    2. Add this and save:

    a, .entry-title a {
    	color: #9ba2af;
    }
    
    a:visited, .entry-title a:visited {
    	color: #9ba2af;
    }
    
    a:hover, .entry-title a:hover {
    	color: #8bd9ba;
    }

    3. Go to the home page and check to make sure the link colors work as expected: it will make linked post titles gray but then turn green on hover

    4. Add back your other CSS one snippet at a time and test the site after each change to make sure the CSS behaves as you expect and that nothing changes with the post title link colors

  16. Hi,

    i added you css before instead of mine, it worked most of the time, but in firefox it was discontinuous. Safari and EE fine.

    Now i followed your last instructions, removed all, add css for title and than step by step the rest. It works now. :D Thank you so much!

Topic Closed

This topic has been closed to new replies.

About this Topic