hover on social icon

  • Resolved Banjer

    (@banjer)


    12 years, 10 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;
}
Viewing 5 replies - 1 through 5 (of 5 total)
  • Siobhan

    (@siobhyb)

    12 years, 10 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.

    Thread Starter Banjer

    (@banjer)

    12 years, 10 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??

    Siobhan

    (@siobhyb)

    12 years, 10 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;

}
    Thread Starter Banjer

    (@banjer)

    12 years, 10 months ago

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

    Siobhan

    (@siobhyb)

    12 years, 10 months ago

    Glad it’s working for you now! 🙂

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

The topic ‘hover on social icon’ is closed to new replies.