Hover Text – Show Product Block

Demo: https://tuanphan4-test.squarespace.com/hover-text-show-product-block?noredirect

Pass: abc

Suppose you have 3 texts.
You want: when users hover on each Text >> Show Product Block.

#1. First, add a Text Block with 3 different texts, then add these URLs:

• Product 01 – #product01
• Product 02 – #product02
• Product 03 – #product03

Make sure “Open Link in new tab” is DISABLED.

 

 

and 3 Product Blocks on the right.

#2. Use this free tool to find the ID of the Text and Product Block

In my example, we will have:

• Text block: #block-yui_3_17_2_1_1710486514450_8197
• Product 01: #block-yui_3_17_2_1_1710486514450_4050
• Product 02: #block-yui_3_17_2_1_1710486514450_5420
• Product 03: #block-yui_3_17_2_1_1710486514450_7355

#3. Use this code to Code Injection – Footer (or Page Header Code Injection)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
  // Product 01
  $('#block-yui_3_17_2_1_1710486514450_8197 a[href="#product01"]').hover(function(){
    $("#block-yui_3_17_2_1_1710486514450_4050").addClass("show");
    $('div:not(#block-yui_3_17_2_1_1710486514450_4050)').removeClass('show');
    }
  );
// Product02
 $('#block-yui_3_17_2_1_1710486514450_8197 a[href="#product02"]').hover(function(){
    $("#block-yui_3_17_2_1_1710486514450_5420").addClass("show");
    $('div:not(#block-yui_3_17_2_1_1710486514450_5420)').removeClass('show');
    }
  );
  // Product 03 
   $('#block-yui_3_17_2_1_1710486514450_8197 a[href="#product03"]').hover(function(){
    $("#block-yui_3_17_2_1_1710486514450_7355").addClass("show");
      $('div:not(#block-yui_3_17_2_1_1710486514450_7355)').removeClass('show');
    }
  );
});
</script>
<style>
#block-yui_3_17_2_1_1710486514450_4050, #block-yui_3_17_2_1_1710486514450_5420, #block-yui_3_17_2_1_1710486514450_7355 {
  opacity: 0;
  transition: all 0.1s ease;
  }
  .show {
  opacity: 1 !important;
     transition: all 0.1s ease;
  }
</style>

#4. Explain code