Изменение настраиваемой анимации ключевого кадра стиля курсора при зависании

Мне удалось создать пользовательский курсор из div с помощью jQuery, могу ли я также изменить стиль курсора, например: (стилизация анимационных ключевых кадров) при зависании над div.Изменение настраиваемой анимации ключевого кадра стиля курсора при зависании

Вот мой html-код, который делает пользовательский курсор.

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>  <style type="text/css" media="screen"> 
     .verline, .horline { 
      border-radius: 20%; 
      background-color: #121212; 
      position :absolute; 
      animation-duration: 400ms; 
      animation-timing-function: ease-out; 
      animation-iteration-count: 1; 
      animation-direction: normal; 
      animation-fill-mode: forwards; 
     } 
     .horline { 
      width: 50px; 
      height: 3px; 
      top: -3px; 
      left: -25px; 
      animation-name: hormove; 
     } 
     .verline { 
      width: 3px; 
      height: 50px; 
      top: -27px; 
      left: -2px; 
      animation-name: vermove; 
     } 
     @keyframes hormove { 
      0% { transform: rotate(0deg); top: -3px; left: -25px; } 
      100% { transform: rotate(220deg); top: -19px; left: -25px; } 
     } 
     @keyframes vermove { 
      0% { transform: rotate(0deg); top: -27px; left: -2px; } 
      100% { transform: rotate(50deg); top: -12px; left: -2px; } 
     } 
     #hoverit { 
      width: 200px; 
      height: 200px; 
      background: red; 
     } 
    </style> 
</head> 
<body> 
    <div id="cursor"> 
     <div class="horline"></div> 
     <div class="verline"></div> 
    </div> 
    <div id="hoverit"></div> 
</body> 
<script> 
    var ElementCursor = { 
     cursorElement: "", 
     setCursor: function (cursorId) { 
      $('html').css({ 
       'cursor': 'none' 
      }); 
      $('html').mousedown(function (e) {return false;}); 
      ElementCursor.cursorElement = cursorId; 
      ElementCursor.updateCursor(); 
     }, 
     removeCursor: function() { 
      $('html').css({ 
       'cursor': '' 
      }); 
      ElementCursor.cursorElement = ''; 
     }, 
     updateCursor: function() { 
      $(document).mousemove(function (e) { 
       $('#' + ElementCursor.cursorElement).css({ 
        'position': 'fixed', 
         'top': e.pageY + 'px', 
         'left': e.pageX + 'px' 
       }); 
      }); 
     } 
    }; 
    ElementCursor.setCursor("cursor"); 
</script> 
</html>

источник

2017-02-17 khalil111

Выглядит немного более сложным, вы могли бы лучше объяснить, что вы пытаетесь достичь? Существует псевдокласс класса CSS, называемый [: hover] (https://www.w3schools.com/css/css_pseudo_classes.asp) Но он не оживляет. –

Мне нужно сделать курсор как знак +, тогда, когда я нахожусь справа, он должен изменить стиль на>, а также, когда я перемещаю мышь влево, он должен изменить стиль на <. Я уже успел сделать это> вы можете скопировать мой код и протестировать его, но он все еще не меняется – khalil111

У этого плункера сейчас: http://plnkr.co/edit/Iy7JX4?p=preview –

Конечно - просто получить смещение и размер дел до парить на перемещения мыши, использовать его, чтобы определить, является ли курсор ДИВ слева или справа от его центра и дать ему соответствующий класс.

$(document).mousemove(function (e) { 
     ElementCursor.cursorElement.css({ 
      'position': 'fixed', 
      'top': e.pageY + 'px', 
      'left': e.pageX + 'px' 
     }); 
     var width = ElementCursor.hoverElement.outerWidth(); 
     var left = ElementCursor.hoverElement.offset().left; 
     if (e.pageX > left + (width/2)) { 
      ElementCursor.cursorElement.addClass('right'); 
     } else { 
      ElementCursor.cursorElement.removeClass('right'); 
     } 
    }); 
    ElementCursor.hoverElement.mouseenter(function(e) { 
     ElementCursor.cursorElement.addClass('in'); 
    }); 
    ElementCursor.hoverElement.mouseleave(function(e) { 
     ElementCursor.cursorElement.removeClass('in'); 
    });

в действии: http://plnkr.co/edit/mIlI4BqXlpZ2IjiaNFFR?p=preview

источник

2017-02-17 19:44:20

Спасибо, у вас есть пример о том, как его достичь, так как измените любой стиль css курсора при зависании - цвет фона в порядке, я могу его изменить, спасибо – khalil111

Спасибо, я нужен он анимированный курсор +, когда он находится посередине страницы, тогда он будет анимироваться> при наведении налево, а затем <при падении вправо, это просто изменение стиля ключевых кадров анимации при наведении на javascript – khalil111

Я дал вам рабочий ответ, включающий пример, который фактически выполняет вашу работу - разве вы не проголосовали бы за это? –

Изменение настраиваемой анимации ключевого кадра стиля курсора при зависании

ответ

Смежные вопросы