WordPress.org

Support

Support » Themes and Templates » [Resolved] hover on social icon

[Resolved] hover on social icon

  • How can I do to have an hover effect of social icon, I would like to show a color icon when the mouse go over the black icon.
    I try with this code ma nothing happen:

    #masthead {
    opacity: 1;
    }
    
    .main-navigation {
     text-align: start;
    }
    
    .main-navigation a {
     text-indent: -9999em;
     width: 50px;
     height: 50px;
    
    }
    
    .menu-facebook  {
      background-image: url(http://www.davidenaccarati.it/wp_light/wp-content/uploads/2013/07/fb.png) !important;
      background-repeat: no-repeat !important;
      background-position: left center;
    
    }
    .menu-facebook: hover {
      background-image: url( http://www.davidenaccarati.it/wp_light/wp-content/uploads/2013/07/fbcolor.png) !important;
      background-repeat: no-repeat !important;
      background-position: left center;
    }
Viewing 5 replies - 1 through 5 (of 5 total)
  • Hey. I just took a look at your child theme’s CSS, as it is now. To achieve the effect you want, remove the following:

    .menu-facebook  {
      background-image: url(http://www.davidenaccarati.it/wp_light/wp-content/uploads/2013/07/fbcolor.png) !important;
      background-repeat: no-repeat !important;
      background-position: left center;
    
    }

    And replace it with:

    #masthead {
    opacity: 1;
    }
    
    .menu-facebook  {
      background-image: url(http://www.davidenaccarati.it/wp_light/wp-content/uploads/2013/07/fb.png) !important;
      background-repeat: no-repeat !important;
      background-position: left center;
    
    }
    
    .menu-facebook:hover {
      background-image: url( http://www.davidenaccarati.it/wp_light/wp-content/uploads/2013/07/fbcolor.png) !important;
    }

    Let me know if this works for you.

    Ok it works, thank you very much but there is another problem now if I remove also

    .main-navigation a {
     text-indent: -9999em;
     width: 50px;
     height: 50px;
    }

    the text remain… how can I remove it??

    Hey. You still need to keep the following in your CSS in order to hide the text:

    .main-navigation {
     text-align: start;
    }
    
    .main-navigation a {
     text-indent: -9999em;
     width: 50px;
     height: 50px;
    
    }

    It works !!!! Yeah thank you very much 🙂

    Glad it’s working for you now! 🙂

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘[Resolved] hover on social icon’ is closed to new replies.