Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

TWMW

Member
  • Content Count

    2
  • Joined

  • Last visited

  1. We've added a custom social link icon in the footer of our website our website (Hyde template) using the following custom html in Home>Design>Custom CSS (huge thanks to @tuanphan) : .Footer-middle .sqs-svg-icon--wrapper:first-child { visibility: hidden; } .Footer-middle .sqs-svg-icon--outer .sqs-svg-icon--wrapper:first-child:after { visibility: visible; content: ""; background-image: url(https://image.flaticon.com/icons/svg/49/49625.svg); background-size: contain; background-repeat: no-repeat; background-position: center center; width: 30px; height: 30px; display: inline-block; } We would like to have the custom icon gray out when the user hovers the pointer over either one of the other two icons in the block. For instance, hovering over icon 1 (the new custom social link icon) causes icon 2 and icon 3 in the block to gray out, but when the user hovers over icon 2, icon 3 will gray out but icon 1 remains the same color. Similarly, hover on icon 3 results in icon 2 graying out, but icon 1 remains solid. Pictures of each scenario have been included for the sake of clarity. I've been informed that the solution is somewhat complex and requires using jquery…. Any info is helpful and appreciated.
×
×
  • Create New...