Demo: https://tuanphan-demo01.squarespace.com/hover-text-change-video-v2?noredirect
Password: abc
Suppose you have 4 texts.
You want: when users hover on each text >> Change video on the right.
#1. First, add a Text Block with 4 Paragraph, then add these URLs
- Apple – #apple
- Microsoft – #microsoft
- Instagram – #instagram
- Google – #google
Make sure “Open Link in new tab” is DISABLED.
and 4 video blocks on the right
#2. Use this free tool to find the ID of Image and Video Blocks
In my example, we will have:
- Left text block: #block-81180abeb3d1bb243568
- Apple video: #block-6147b092aa559d47a4df
- Microsoft video: #block-8474988d8d52cc1d2334
- Instagram video: #block-0f4a6585a6c4af3b7f56
- Google video: #block-4b5750400e8336b00078
#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(){ // Apple $("#block-6147b092aa559d47a4df").closest('.fe-block').addClass('apple show'); $('a[href="#apple"]').addClass('active-link'); // Microsoft $("#block-8474988d8d52cc1d2334").closest('.fe-block').addClass('microsoft'); // Instagram $("#block-0f4a6585a6c4af3b7f56").closest('.fe-block').addClass('instagram'); // Google $("#block-4b5750400e8336b00078").closest('.fe-block').addClass('google'); // Apple $('a[href="#apple"]').hover(function(){ $(".apple").addClass("show"); $('.fe-block:not(.apple)').removeClass('show'); $(this).addClass('active-link'); $('a:not([href="#apple"])').removeClass('active-link'); } ); // Microsoft $('a[href="#microsoft"]').hover(function(){ $(".microsoft").addClass("show"); $('.fe-block:not(.microsoft)').removeClass('show'); $(this).addClass('active-link'); $('a:not([href="#microsoft"])').removeClass('active-link'); } ); // Instagram $('a[href="#instagram"]').hover(function(){ $(".instagram").addClass("show"); $('.fe-block:not(.instagram)').removeClass('show'); $(this).addClass('active-link'); $('a:not([href="#instagram"])').removeClass('active-link'); } ); // Google $('a[href="#google"]').hover(function(){ $(".google").addClass("show"); $('.fe-block:not(.google)').removeClass('show'); $(this).addClass('active-link'); $('a:not([href="#google"])').removeClass('active-link'); } ); }); </script> <style> .apple .video-block, .microsoft .video-block, .facebook .video-block, .instagram .video-block, .google .video-block { display: none; } .show .video-block { display: block !important; } .show { z-index: 999999 !important; } .active-link, .active-link * { color: #f1f !important; } </style>
#4. Explain code