Quantcast
Channel: Active questions tagged html - Stack Overflow
Viewing all articles
Browse latest Browse all 74020

Custom cursors in HTML

$
0
0

I'm creating a custom cursor for a site. I've gotten two divs centered to the cursor when the mouse moves but when I hover on an anchor tag the position of the background cursor is off. I've tried using pageX and pageY to center it in the for loop but it doesn't seem to work. Help?

Here is my HTML:

<div class="cursor"></div>
    <div class="cursor-bg"></div>

CSS:

    .cursor{
        height:10px;
        width:10px;
        border-radius:50%;
        position:absolute;
        background: #fff;
        z-index: 100;

    }

    .cursor-bg{
        height:30px;
        :30px;
        border-radius:50%;
        position:absolute;
        background: $lightCursor-bg;
        transition-duration: 400ms;
        transition-timing-function: ease-out;

    }

    .expand{
        width: 100px;
        height: 100px;
        position: absolute;
        border:solid 1px #fff;
        background: rgba(255,255,255, 0);
    }

JS:

    (function(){
        var cursor = document.querySelector('.cursor');
        var cursorBg = document.querySelector('.cursor-bg');
        var navLinks = document.querySelectorAll('a');

        document.addEventListener('mousemove', e => {
            cursor.style.left = (e.pageX - 5) + 'px';
            cursor.style.top = (e.pageY - 5) + 'px';
            cursorBg.style.left = (e.pageX - 15) + 'px';
            cursorBg.style.top = (e.pageY -15) + 'px';

        });

       for (var i = 0; i < navLinks.length; i++) {

              var singleLink = navLinks[i];
              singleLink.addEventListener('mouseover', e => {
                  cursorBg.classList.add("expand");
                  cursorBg.style.left = (e.pageX - 50) + 'px';
                  cursorBg.style.left = (e.pageY - 50) + 'px';
              })

              singleLink.addEventListener('mouseout', e => {
                  cursorBg.classList.remove("expand");
              })
       }

     })();

Viewing all articles
Browse latest Browse all 74020

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>