WordPress.org

Ready to get started?Download WordPress

Forums

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

  1. Banjer
    Member
    Posted 1 year 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. Siobhan Bamber (siobhyb)
    Forum Mod.
    Posted 12 months ago #

    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 12 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. Siobhan Bamber (siobhyb)
    Forum Mod.
    Posted 12 months ago #

    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 12 months ago #

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

  6. Siobhan Bamber (siobhyb)
    Forum Mod.
    Posted 12 months ago #

    Glad it's working for you now! :)

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags

No tags yet.