Question

您好，我一直希望实现一种鼠标悬停在链接上时进行更改的方法，并且没有遇到有关实现此方法的指南。

我正在寻找类似此网站的内容： https://www.niccolomiranda.com/about当您将鼠标悬停在链接上时，会增加圆圈的面积。

如果有人帮我解决这个问题，将不胜感激！

Answer 1

希望这对您有帮助：

ie.document.getElementById("tblTimeSheet_tblMain").getElementsByTagName("tr")(4).getElementsByTagName("td")(7)

$(document).mousemove(function(e) {
    
    $('.cursor').eq(0).css({
        left: e.clientX,
        top: e.clientY
    });

    setTimeout(function() {
      $('.cursor').eq(1).css({
          left: e.clientX,
          top: e.clientY
      });
    }, 100);
})
 
$("a").on("mouseenter", function () {
  $('.cursor-a').addClass("active");
  $('.cursor-v').addClass("active");
});

$("a").on("mouseleave", function () {
  $('.cursor-a').removeClass("active");
  $('.cursor-v').removeClass("active");
});

* {
    cursor: none;
}

body {
  background: #000;
}

.cont {
  padding: 40px;
}
.link {
  color:#fff;
  text-decoration:none;
  display:block;
  padding-top:20px;
}

.cursor {
    position: fixed;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    z-index: 1000;
}


.cursor {
  position: fixed;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  z-index: 1000;
  
}
  
.cursor-a  {
        position: fixed;
        background-color: #5C6AFF;
        width: 10px;
        height: 10px;
        border-radius: 100%;
        z-index: 10000;
        transition: 0.3s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform, 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity;
        user-select: none;
        pointer-events: none;
        z-index: 100000000;
        transform: scale(1);
    }

.cursor-a.active {
        opacity: 0.5;
        transform: scale(0);
    }
.cursor-b {
    position: fixed;
    transition: 0.6s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform, 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity;
    user-select: none;
    pointer-events: none;
    z-index: 10000000;
    transform: translate(-14px, -14px);
}

.cursor-v {
    width: 38px;
    transition: 0.6s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform, 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity;
    height: 38px;
    border-radius: 100%;
    border-style: solid;
    border-width: 1px;
    border-color: white;
}

    .cursor-v.active {
	    background-color: rgba(255, 255, 255, 0.1);
        opacity: 0.8;
        transform: scale(2);
        border:none;
    }

MAGIC FIDDLE

悬停时自定义鼠标动画

1 个答案: