Question

我有一个ul，每个li上都有一些项目，但我有一个不同的光标，它可以完全正常工作，但是不平滑，因此，是否有任何方法可以从默认光标过渡到自定义图像？

HTML

<section class="who">
  <ul>
     <li>Purpose</li>
     <li>Creative</li>
     <li>Enthusiastic</li>
     <li>Adventure</li>
     <li>Curious</li>
     <li>Passionate</li>
  </ul>
</section>

CSS

.who ul li:first-of-type {
   cursor: url('/assets/media/icons/target.png'), auto;
}

以此类推，你有什么主意。

Answer 1

那么，您是否要快速改变图像光标而不是像淡入/淡出效果那样平滑？在这种情况下，您还涉及javascript：

.who ul li { cursor: none; }
创建一个<div class="cursor-container"></div>
.cursor-container { position:absolute; z-index:100; }
将所有图像放入
.cursor-container .image-container { position:absolute; }
使用javascript的onMouseMove（）来获取光标的坐标并在（see here how）旁边移动.cursor-container
使用CSS隐藏所有图像.cursor-container .image-container { display:none }
像<li class="whatever" onmouseover="changeCursor()">一样组织您的列表，每个列表使用不同的类名
使用JS，您必须switch（）所有<li>的类，并将CSS3过渡（如不透明度）应用于正确的类。

希望对您有用。

下面的代码是一个示例（不适用于jsfiddle，请在您的本地页面上复制）。

<!DOCTYPE html>
<html>
  <head>
    <title> </title>

    <style type="text/css">
      .who ul {
        font-size: 0px;
        cursor: none;
      }
      .who ul li {
        display: inline-block;
        padding: 10px;
        background-color: #CCC;
        color: #FFF;
        font-size: 18px;
        cursor: none;
      }
      .who ul li.facebook {
        background-color: #3b5998;
      }
      .who ul li.twitter {
        background-color: #1dcaff;
      }
      .who ul li.youtube {
        background-color: #ff0000;
      }
      .who ul li.whatsapp {
        background-color: #075e54;
      }
      .who ul li.instagram {
        background-color: #e95950;
      }

      #cursor-container {
        position: absolute;
        width: 20px;
        height: 20px;
        display: none;
        cursor: none;
      }
      #cursor-container.visible {
        display: block;
      }
      #cursor-container .image-container {
        position: absolute;
        width: inherit;
        height: inherit;
        opacity: 0;
        background-color: #FFF;

        transition: opacity 0.6s linear;
        -moz-transition: opacity 0.6s linear;
        -o-transition: opacity 0.6s linear;
        -webkit-transition: opacity 0.6s linear;
      }
      #cursor-container .image-container.fadeIn {
        opacity: 1;
      }
      #cursor-container .image-container img {
        width: 100%;
        height: 100%;
      }

    </style>
  </head>
  <body>

    <div class="who">
        <ul>
            <li class="facebook" onmouseover="changeCursor(this);">facebook</li>
        <li class="twitter" onmouseover="changeCursor(this);">twitter</li>
        <li class="youtube" onmouseover="changeCursor(this);">youtube</li>
        <li class="whatsapp" onmouseover="changeCursor(this);">whatsapp</li>
        <li class="instagram" onmouseover="changeCursor(this);">instagram</li>
        </ul>
    </div>
    <div id="cursor-container">
        <div class="image-container facebook">
            <img src="http://icons.iconarchive.com/icons/sicons/flat-shadow-social/256/facebook-icon.png" />
        </div>
        <div class="image-container twitter">
            <img src="https://cdn2.iconfinder.com/data/icons/metro-uinvert-dock/256/Twitter_NEW.png" />
        </div>
        <div class="image-container youtube">
            <img src="https://image.flaticon.com/icons/png/128/185/185983.png" />
        </div>
        <div class="image-container whatsapp">
            <img src="http://aux2.iconspalace.com/uploads/whatsapp-icon-256-829186234.png" />
        </div>
        <div class="image-container instagram">
            <img src="https://image.flaticon.com/icons/png/128/174/174855.png" />
        </div>
    </div>

    <script type="text/javascript">

    var cursor = document.getElementById('cursor-container');
    var cursorImages = cursor.getElementsByClassName('image-container');

    (() => {

        let list = document.getElementsByClassName('who')[0].getElementsByTagName('ul')[0];

        document.addEventListener('mousemove', (e) => {

        cursor.style.top = e.clientY+'px';
        cursor.style.left = e.clientX+'px';
        });

        list.addEventListener('mouseenter', () => {

            cursor.classList.add('visible');
        });
        list.addEventListener('mouseleave', () => {

            cursor.classList.remove('visible');
        });

    })();


    function changeCursor(elem) {

        Array.from(cursorImages).map((elem) => {

            elem.classList.remove('fadeIn');
        });

      switch(elem.className) {

        case 'facebook': {
          cursor.getElementsByClassName('facebook')[0].classList.add('fadeIn');
          break;
        }
        case 'twitter': {
          cursor.getElementsByClassName('twitter')[0].classList.add('fadeIn');
          break;
        }
        case 'youtube': {
          cursor.getElementsByClassName('youtube')[0].classList.add('fadeIn');
          break;
        }
        case 'whatsapp': {
          cursor.getElementsByClassName('whatsapp')[0].classList.add('fadeIn');
          break;
        }
        case 'instagram': {
          cursor.getElementsByClassName('instagram')[0].classList.add('fadeIn');
          break;
        }
        default:
          break;
      }
    } 

    </script>

  </body>
</html>

自定义CSS光标过渡

1 个答案: