WordPress.org

Ready to get started?Download WordPress

Forums

Spun
[resolved] hover on social icon (6 posts)

  1. Banjer
    Member
    Posted 8 months ago #

    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;
    }
  2. 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.

  3. Banjer
    Member
    Posted 8 months ago #

    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??

  4. 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;
    
    }
  5. Banjer
    Member
    Posted 8 months ago #

    It works !!!! Yeah thank you very much :)

  6. Glad it's working for you now! :)

Reply

You must log in to post.

About this Theme

About this Topic

Tags

No tags yet.