光标img转换base64有问题

问题描述 投票:0回答:1

我尝试替换我的网站博客页面的实际光标,用我的 svg 徽标进行更改以获得光标的空间入侵者。

svg-custom-cursor

但是当我刷新页面时我看不到它;有页面 https://chichportichbenjamin.mydurable.com/blog 以及向网站构建器添加的代码

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <style>
        /* Styles CSS */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f3f3f3; /* Couleur de fond moderne */
            position: relative; /* Ajout pour que le pointeur de souris suive correctement */
        }

        .custom-cursor {
            width: 45px; /* Taille du curseur */
            height: 27px;
            background-image: url('data:image/svg+xml;base64,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'); /* Image du curseur */

            background-size: cover;
            cursor: none; /* Désactiver le curseur par défaut */
            pointer-events: none; /* Éviter que le pointeur interfère avec les éléments */
            position: fixed; /* Position fixe pour suivre la souris */
            transition: transform 0.3s ease;
            z-index: 100; /* Assurer que le point reste au-dessus de tous les autres éléments */
        }

        .custom-cursor:hover {
            transform: scale(1.2);
        }

        /* Masquer le texte "Fabriqué avec" et le lien vers Durable */
.body-normal span {
    display: none;
}

/* Masquer les liens vers Durable */
a[href*="durable.co"] {
    display: none;
}

    </style>
</head>
<body>
    <!-- Contenu HTML -->
    <div class="custom-cursor"></div>

    <!-- Script JavaScript pour le pointeur de souris -->
    <script>

var style = document.createElement('style');
style.innerHTML = `
    /* Définition du curseur personnalisé */
    body {
            cursor: url(
        document.addEventListener('mousemove', function(event) {
            const point = document.querySelector('.point');
            point.style.left = event.clientX + 'px';
            point.style.top = event.clientY + 'px';
        });
    </script>
</body>
</html>
javascript html css base64 mouse-cursor
1个回答
0
投票
Your style.innerHTML should be 

style.innerHTML = 
`body {
  cursor: url(
    document.addEventListener('mousemove', function (event) {
      const point = document.querySelector('.point');
      point.style.left = event.clientX + 'px';
      point.style.top = event.clientY + 'px';
    }));
}`
© www.soinside.com 2019 - 2024. All rights reserved.