I successfully developed a custom cursor using a div with jQuery. Is it possible to change the cursor style, such as applying animation keyframes, when hovering over the div?
Below is the HTML code I used to create the custom cursor.
<!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>