# Help with Social Media Hover

**URL:** <https://community.hubspot.com/t/help-with-social-media-hover/444>\
**Category:** CMS Development\
**Created:** [November 21, 2016, 4:47pm UTC](https://community.hubspot.com/t/help-with-social-media-hover/444 "2016-11-21T16:47:31Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![mariana\_pic](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/mariana_pic/32/66297_2.png) [@mariana\_pic](https://community.hubspot.com/u/mariana_pic)\
**Post date:** [November 21, 2016, 4:47pm UTC](https://community.hubspot.com/t/help-with-social-media-hover/444/1 "2016-11-21T16:47:31Z")

</div>

Hi!

I’m having problems with the hover of my social media buttons.

I have an HTML module with the following code:

\<!--Facebook--\>  
\<a target=“\_blank” href=“[https://www.facebook.com/apogeeITservices](https://www.facebook.com/apogeeITservices)”\>  
\<img src=“[http://cdn2.hubspot.net/hubfs/492950/Apogee/Icons/Social\_Media\_Icons/Apogee-website-facebook.png](http://cdn2.hubspot.net/hubfs/492950/Apogee/Icons/Social_Media_Icons/Apogee-website-facebook.png)” alt=“facebook” height=“30px” width=“30px”  
onmouseover=“this.src=‘[http://cdn2.hubspot.net/hubfs/492950/Apogee/Icons/Social\_Media\_Icons/Apogee-website-facebook-hover.png](http://cdn2.hubspot.net/hubfs/492950/Apogee/Icons/Social_Media_Icons/Apogee-website-facebook-hover.png)’;”  
onmouseout="this.src='[http://cdn2.hubspot.net/hubfs/492950/Apogee/Icons/Social\_Media\_Icons/Apogee-website-facebook.png’;"\>\</a](https://community.hubspot.com/)\>

\<!--Twitter--\>  
\<a target=“\_blank” href="[https://twitter.com/apogeeITS"\>\<img](https://community.hubspot.com/) src=“[http://cdn2.hubspot.net/hubfs/492950/Apogee/Icons/Social\_Media\_Icons/Apogee-website-twitter.png](http://cdn2.hubspot.net/hubfs/492950/Apogee/Icons/Social_Media_Icons/Apogee-website-twitter.png)” alt="twitter"height=“30px” width=“30px”  
onmouseover=“this.src=‘[http://cdn2.hubspot.net/hubfs/492950/Apogee/Icons/Social\_Media\_Icons/Apogee-website-twitter-hover.png](http://cdn2.hubspot.net/hubfs/492950/Apogee/Icons/Social_Media_Icons/Apogee-website-twitter-hover.png)’;”  
onmouseout="this.src='[http://cdn2.hubspot.net/hubfs/492950/Apogee/Icons/Social\_Media\_Icons/Apogee-website-twitter.png’;"\>\</a](https://community.hubspot.com/)\>

\<!--Linkedin--\>  
\<a target=“\_blank” href="[https://www.linkedin.com/company/apogee-it-services"\>\<img](https://community.hubspot.com/) src=“[http://cdn2.hubspot.net/hubfs/492950/Apogee/Icons/Social\_Media\_Icons/Apogee-website-linkedin.png](http://cdn2.hubspot.net/hubfs/492950/Apogee/Icons/Social_Media_Icons/Apogee-website-linkedin.png)” alt="linkedin"height=“30px” width=“30px”  
onmouseover=“this.src=‘[http://cdn2.hubspot.net/hubfs/492950/Apogee/Icons/Social\_Media\_Icons/Apogee-website-linkedin-hover.png](http://cdn2.hubspot.net/hubfs/492950/Apogee/Icons/Social_Media_Icons/Apogee-website-linkedin-hover.png)’;”  
onmouseout="this.src='[http://cdn2.hubspot.net/hubfs/492950/Apogee/Icons/Social\_Media\_Icons/Apogee-website-linkedin.png’;"\>\</a](https://community.hubspot.com/)\>

but when i hover the icons, the image does not change.

It used to work before but i dont know what happened.

This is the URL: [https://www.apogeeitservices.com](https://www.apogeeitservices.com)

Thanks!

---

<div class="post-metadata">

**Author:** ![ndwilliams3](https://avatars.discourse-cdn.com/v4/letter/n/c4cdca/32.png) [@ndwilliams3](https://community.hubspot.com/u/ndwilliams3)\
**Post date:** [November 21, 2016, 5:12pm UTC](https://community.hubspot.com/t/help-with-social-media-hover/444/2 "2016-11-21T17:12:52Z")

</div>

I took a look and your mouseover function is still working. However, the Responsive image srcset is overriding the image that is displaying. I’m not sure of the best way to fix this with Javascript outside of also including a function to change the srcset images to [http://cdn2.hubspot.net/hubfs/492950/Apogee/Icons/Social\_Media\_Icons/Apogee-website-facebook-hover.png](http://cdn2.hubspot.net/hubfs/492950/Apogee/Icons/Social_Media_Icons/Apogee-website-facebook-hover.png). Using CSS vs onmouseover function should also solve the issue.

---

<div class="post-metadata">

**Author:** ![mariana\_pic](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/mariana_pic/32/66297_2.png) [@mariana\_pic](https://community.hubspot.com/u/mariana_pic)\
**Post date:** [November 21, 2016, 9:03pm UTC](https://community.hubspot.com/t/help-with-social-media-hover/444/3 "2016-11-21T21:03:43Z")

</div>

Thank you!

I decided to go with the CSS solution!

Its working now!

---

<div class="post-metadata">

**Author:** ![Ty](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/ty/32/5413_2.png) [@Ty](https://community.hubspot.com/u/Ty)\
**Post date:** [November 21, 2016, 5:50pm UTC](https://community.hubspot.com/t/help-with-social-media-hover/444/4 "2016-11-21T17:50:06Z")

</div>

Hi Mariana!

As ndwilliams3 mentioned, this is easily done with CSS, some benefits are load time, and the fact that you won’t need to rely on JS to make sure these hovers work correctly. I quickly built out an example that matches the one you use on the homepage. Feel free to try it out 🙂

**HTML**

```auto
<!--Facebook-->
<a target="_blank" class="social-icons facebook" href="https://www.facebook.com/apogeeITservices">
</a>

<!--Twitter-->
<a target="_blank" class="social-icons twitter" href="https://twitter.com/apogeeITS">
</a>

<!--Linkedin-->
<a target="_blank" class="social-icons linkedin" href="https://www.linkedin.com/company/apogee-it-services">
</a>

```

**CSS**

```auto
.social-icons{
 width:45px;
 height:40px;
 display:block;
 float:left;
 background-repeat:no-repeat !important;
}

.facebook{ background:url("http://cdn2.hubspot.net/hubfs/492950/Apogee/Icons/Social_Media_Icons/Apogee-website-facebook.png");
}

.facebook:hover{
background:url("http://cdn2.hubspot.net/hubfs/492950/Apogee/Icons/Social_Media_Icons/Apogee-website-facebook-hover.png");
}

.twitter{ background:url("http://cdn2.hubspot.net/hubfs/492950/Apogee/Icons/Social_Media_Icons/Apogee-website-twitter.png");
}

.twitter:hover{ background:url("http://cdn2.hubspot.net/hubfs/492950/Apogee/Icons/Social_Media_Icons/Apogee-website-twitter-hover.png");
}

.linkedin{
background:url("http://cdn2.hubspot.net/hubfs/492950/Apogee/Icons/Social_Media_Icons/Apogee-website-linkedin.png");
}

.linkedin:hover{ background:url("http://cdn2.hubspot.net/hubfs/492950/Apogee/Icons/Social_Media_Icons/Apogee-website-linkedin-hover.png");
}

```

Also, here is a **[JSFiddle](https://jsfiddle.net/ua9Lh292/)** where you can see it in action!

I hope this helps, let me know if you have any questions!

-- Ty

---

<div class="post-metadata">

**Author:** ![mariana\_pic](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/mariana_pic/32/66297_2.png) [@mariana\_pic](https://community.hubspot.com/u/mariana_pic)\
**Post date:** [November 21, 2016, 9:04pm UTC](https://community.hubspot.com/t/help-with-social-media-hover/444/5 "2016-11-21T21:04:39Z")

</div>

I just saw this!

I’ve created something very similar!!

Thank you!!!

---

<div class="post-metadata">

**Author:** ![subin](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/subin/32/29904_2.png) [@subin](https://community.hubspot.com/u/subin)\
**Post date:** [November 22, 2016, 4:39am UTC](https://community.hubspot.com/t/help-with-social-media-hover/444/6 "2016-11-22T04:39:19Z")

</div>

Hi,

For this type of elements try to use icons (eg: font awsome),

[Font Awesome](http://fontawesome.io/icons/) So it will be easy to add css

![16x16_smiley-happy.png.png](https://d2qpr2jzcazej7.cloudfront.net/original/2X/2/22d5e40d253def47f5f4ea7f0e3e70be19010689.png)

Thanks