Cursor

by kodjoe mambi

HTML

<div class="w-blocks-group-wrapper blocks-group-wrapper_2QF wl-svg-cursor-parent">
  <div id="blockId-68ddcdac471817cb7b1baa94" data-block-name="Custom block" data-block-categories="custom" data-test="block-wrapper" data-anchor="custom" data-is-dark-background="false" class="block-wrapper w-block-wrapper block-wrapper_3Um background_3lr background w-state-has-background">
    
    <div style="display:none" id="custom"></div>
    
    <div class="w-block-background background-wrapper_RZ2" aria-hidden="true" data-background--hide="false" data-component="background" data-type="color" data-data-loaded="true">
      <div class="background_2xT" data-role="placeholder" data-selection-container="true"></div>
    </div>


      <section class="w-section">
        <div class="w-section__inner">
          <header class="w-section__header">

            <div class="w-grid w-grid--row w-grid--gap" data-columns-count="1">
              <div class="w-grid__inner"><div class="w-grid__item w-grid__item--top">
                <div data-is-dark-background="false" class="w-grid__item-inner w-grid__item-panel w-text-center-xs w-text-center-sm w-text-center-md w-text-center w-1fe2cb245a7faa4efa842c8d97d12cd4 w-mod-shadow background_3lr background w-state-has-background">
                 
                  <div class="background-wrapper_RZ2" aria-hidden="true" data-background--hide="false" data-component="background" data-type="color" data-data-loaded="true">
                    <div class="background_2xT" data-role="placeholder" data-selection-container="true"></div>
                  </div>

                    <div class="w-icon-panel-wrapper">
                      <div class="w-icon-panel w-icon-panel--sm w-disable-decorator">
                        <span aria-label="Icon" class="iconElement_3D2 wl-svg-cursor ui-icon_2oI w-icon" style="color: rgb(26, 42, 75); left: 99px; top: 64px;">
                          <span class="iconElement__inner_2iN">
      ...

CSS

.wl-svg-cursor-parent {
z-index:8;
}

.wl-svg-cursor {
position: absolute; 
top:0;
left: 0;
transform: translate(-50%, -50%);
width: 32px;
height: 32px;
}

JavaScript

$(document).mousemove(function(e){
$('.wl-svg-cursor').css('left',e.pageX+"px");
$('.wl-svg-cursor').css('top',e.pageY+"px");
});