Jump to content

Hover Function

Recommended Posts

Site URL: https://luluthelabel.com/

1056894416_Screenshot2021-06-06at22_41_08.thumb.jpg.588c16d8a22c61a9bfdf9c975589d07a.jpg677403656_Screenshot2021-06-06at22_44_09.thumb.png.6ad5595b7d3e786615c5b38262b6be86.pngHello! 

I recently coded in a TikTok icon for my social links which are shown on both the header and footer of my site. I have noticed that the hover function does not work on this icon, is there a custom code for this please? For example, I hover over the Instagram icon and the TikTok icon does not fade like the others. 

Template is Hyde.

Thanks in advance.

Link to comment
  • Replies 4
  • Views 710
  • Created
  • Last Reply

I unset your CSS and found out the tiktok icon is hard-coded on top of the normal URL icon. All of the original icons comes under the class ".sqs-svg-icon--social" which is only where the hover effect is applied.

spacer.png

And it seems to me that this piece of code is used to hardcode your tiktok icon.

<script>
var tiktoks = document.querySelectorAll('a[href*="tiktok"]');
tiktoks.forEach(item => {
    item.innerHTML = `<div>
  <svg class="SocialLinks-link-svg">
    <svg fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" clip-rule="evenodd" viewBox="0 0 55 55" style="fill: black;">
  <path fill-rule="nonzero" d="M37.006,22.323C36.779,22.344 36.549,22.358 36.316,22.358C33.693,22.358 31.388,21.009 30.047,18.97L30.047,30.507C30.047,35.216 26.229,39.034 21.52,39.034C16.811,39.034 12.993,35.216 12.993,30.507C12.993,25.798 16.811,21.98 21.52,21.98C21.698,21.98 21.872,21.996 22.047,22.007L22.047,26.209C21.872,26.188 21.7,26.156 21.52,26.156C19.116,26.156 17.168,28.104 17.168,30.508C17.168,32.912 19.116,34.86 21.52,34.86C23.924,34.86 26.047,32.966 26.047,30.562C26.047,30.467 26.089,10.968 26.089,10.968L30.105,10.968C30.483,14.559 33.382,17.393 37.006,17.653L37.006,22.323Z"></path>
</svg>     
    </svg>
</div>`
})
</script>

The styling of the icon is coming with the script itself. You can see style="fill: black;". Maybe, you have to find a way to stimulate similar styling on the script itself. To be honest, I am not experienced to solve this but I hope the information above will be helpful for someone who do. Never dealt with SVG attributes!

 

Link to comment
On 6/9/2021 at 11:22 AM, tuanphan said:

If you agree, we can replace 4 social icons with Code Block. Then you can change size, color, hover, easier.

 

Hi, yes this sounds good please if you can assist further? 

Thank you!

Link to comment
18 hours ago, LULU3 said:

Hi, yes this sounds good please if you can assist further? 

Thank you!

Add a Code Block > Paste this code

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous">
<ul class="t-social">
<li>
  <a href="https://instagram.com">
  <i class="fab fa-instagram"></i>
  </a>
</li>
<li>
  <a href="https:facebook.com">
  <i class="fab fa-facebook-f"></i>
  </a>
</li>
<li>
  <a href="https://twitter.com">
  <i class="fab fa-twitter"></i>
  </a>
</li>
<li>
  <a href="https://tiktok.com">
  <i class="fab fa-tiktok"></i>
  </a>
</li>
</ul>
<style>
  /* code block padding top bottom */
  .code-block {
    padding-top: 0;
    padding-bottom: 0;
}
  /* social icons code */
.t-social {
    display: block;
    margin: 0 auto;
    padding-top: 5px;
    text-align: center;
  	padding-left: 0;
}
  .t-social li {
  display: inline-block;
    margin: 0;
    line-height: 100%!important;
  }
  .t-social li i {
    font-size: 30px;
    margin: 0 20px;
}
</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.