0

我真的希望你能帮助解决这个问题。

我制作了一个自定义光标，它环绕在 a 周围，当它悬停在主菜单页面和网站上的几乎每个链接上时，我希望它能够增长。我正在使用带有“mouseover”和“mouseleave”的事件侦听器，但我无法让它工作。我正在尝试使用我给他们的类“链接”来获取主菜单页面。

我遇到的第二个问题是指向链接时无法删除指针。“指针事件：无：不起作用......我正在使用 Elementor Pro 作为构建器。我也在用它实现代码。这是问题的链接：http ://webwork1.eu/test- 2/

这是代码：

<script type="text/javascript">
        const customcursor = document.getElementById("customcursor");
        const moveCursor = event => {
          const cursorWidth = customcursor.offsetWidth / 2;
          customcursor.style.left = event.pageX + "px";
          customcursor.style.top = event.pageY + "px";
        };
        document.addEventListener("mousemove", moveCursor);

    
        let mouseCursor = document.querySelector('.cursor');    
        let menuLinks = document.querySelectorAll('.menu-item');

        menuLinks.forEach(link => {
            link.addEventListener('mouseleave',() => {
                mouseCursor.classList.remove('link-grow');
            })
            link.addEventListener('mouseover',() => {
                mouseCursor.classList.add('link-grow');
            });
        })
        ;
        </script>
/* Custom logo mouse */

@media only screen and (min-width: 1367px) {
    body {cursor:none;}
    
    
   
    #Layer_1 {
        pointer-events: none;
    }
    #customcursor {
    z-index:1000000;
    width: 3rem;
    height: 3rem;
    border: transparent;
    border-radius: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    pointer-events: none;
    transition: all 0.3s ease;
    transition-property: background, transform;
    transform-origin: 100% 100%;
    animation: grow-shrink 4s infinite alternate;
    }
    
    .link-grow {
    transform: scale(2);
}

    .clockwiseSpin {
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-name: clockwiseSpin;
    animation-timing-function: linear;
}

@keyframes clockwiseSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
}
<div class="cursor" id="customcursor">
        <svg
        class="clockwiseSpin"
        id="Layer_1"
        data-name="Layer 1"
        xmlns="http://www.w3.org/2000/svg"
        viewbox="0 0 99.97 113.28"
      >
        <defs>
          <style>
            .cls-1 {
              fill: #0db14b;
                            pointer-events: none;
                            pointer-events: stroke;  
            }
          </style>
        </defs>
        <path
          class="cls-1"
          d="M103.4,51.28a1.51,1.51,0,0,1-1.37-.86A43.81,43.81,0,0,0,66.69,26.31,43.32,43.32,0,0,0,34.43,36.64a1.53,1.53,0,1,1-2-2.33A46.42,46.42,0,0,1,67,23.25a46.91,46.91,0,0,1,37.83,25.82,1.53,1.53,0,0,1-.7,2A1.51,1.51,0,0,1,103.4,51.28Z"
          transform="translate(-15.83 -12.04)"
        />
        <path
          class="cls-1"
          d="M114.26,48.46a1.55,1.55,0,0,1-1.4-.91A54.95,54.95,0,0,0,42.8,18.85,1.53,1.53,0,0,1,41.69,16a58,58,0,0,1,74,30.31,1.53,1.53,0,0,1-.78,2A1.68,1.68,0,0,1,114.26,48.46Z"
          transform="translate(-15.83 -12.04)"
        />
        <path
          class="cls-1"
          d="M63,114.3c-1.35,0-2.7-.06-4.06-.17a46.73,46.73,0,0,1-33.71-19A1.54,1.54,0,0,1,25.55,93a1.53,1.53,0,0,1,2.14.34A43.74,43.74,0,0,0,96,96.19a1.53,1.53,0,0,1,2.32,2A46.79,46.79,0,0,1,63,114.3Z"
          transform="translate(-15.83 -12.04)"
        />
        <path
          class="cls-1"
          d="M63.08,125.33c-1.72,0-3.46-.08-5.2-.23a57.88,57.88,0,0,1-41.76-23.53,1.54,1.54,0,1,1,2.48-1.81,54.89,54.89,0,0,0,91.06-3.63,1.53,1.53,0,1,1,2.62,1.59A57.28,57.28,0,0,1,63.08,125.33Z"
          transform="translate(-15.83 -12.04)"
        />
      </svg>
        </div>

4

0 回答 0