html 更改我的投资组合网站的鼠标光标圆圈比例

我试着寻找一些教程，创建一个自定义的圆形光标，也隐藏了正常的鼠标光标。
我这样做了，我也有一个不同的混合模式，我想要的。
问题是，我希望它改变规模时，我悬停在一个链接。我设法发现它不工作，因为它不能理解什么时候<a>在<div>内部，所以它不会扩展。我还需要一个0.1秒的过渡，当它进入悬停，但也当它退出悬停，如果你知道我的意思。
帮助将非常感谢公元前我真的想在未来几个月内完成这个网站
超文本标记语言：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="portfolio" content="portfolio">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Meskhi Graphics</title>
        <link rel="icon" type="image/x-icon" href="/assets/Favicon.ico">
        <link rel="stylesheet" href="/css/styles.css">
        <link rel="stylesheet" href="/css/mediaqueries.css">
    </head>
    <body>
        <div class="a1">
                <img class="icon" src="/assets/meskhi_graphics_logo.svg">
        </div>
        <div class="a2">
            <ul class="skills">
                <li class="social_media">Social Media <br>Marketing Manager</br></li>
                <li class="graphic_designer">Graphic Designer</li>
                <li><a href="#">UI/UX Designer</a></li>
            </ul>
            <p class="about_me">Hey, Ich bin David und komme aus Kalrsruhe.<br>
                Beruflich bewege ich mich in der Welt des Grafikdesign<br>
                und UI/UX Designs. Derzeit stecke ich mitten in einer<br>
                Weiterbildung zum Social Media Marketing Manager.
            </p>
        </div>
        <h1><a href="#">Hallo</a></h1>
        <div class="a3"></div>
        <div class="cursor"></div>
        <script src="script.js" async defer></script>
    </body>
</html>

CSS：

@import url(/css/satoshi.css);

* , *::before, *::after{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Satoshi-Variable;
}

html,body{
height:100%;
 min-height:100%; 
}

body {
    background-color: #f0efe9;
    height: 100vh;
    width: 100%;
    cursor: none;
}

a {
    cursor: none;
    text-decoration: none;
    color: #0f1016;
}

div {
    border-spacing: 0;
    display: block;
}

.a1 {
    width: 50%;
    height: 25%;
}

.a2 {
    width: 60%;
    height: 50%;
}

.a3 {
    width: 50%;
    height: 25%;
}

.icon {
    padding: 5% 0 5% 10%;
    max-width: 40%;
}

.skills {
    font-family: Satoshi-Variable;
    font-weight: 600;
    font-size: 2em;
    padding-left: 10%;
    padding-top: 2%;
    padding-bottom: 2%;
    color: #0f1016;
}

.graphic_designer {
    margin-top: 2%;
    margin-bottom: 2%;
}

ul {
    list-style: none;
}

.about_me {
    padding-left: 10%;
    line-height: 2em;
    color: #0f1016;
}

.cursor{
    height: 40px;
    width: 40px;
    border-radius: 50%;
    position: fixed;
    transform: translate(-50%, -50%);
    pointer-events: none;
    background: #f0efe9;
    mix-blend-mode: difference;
}

a:hover ~ .cursor{
    transform: translate(-50%, -50%);
    height: 80px;
    width: 80px;
    transition: width 0.1s linear, height 0.1s linear;
}

JS：

const cursor = document.querySelectorAll(".cursor");

window.addEventListener("mousemove", (e) => {
  let x = e.pageX;
  let y = e.pageY;
  let path = e.composedPath();
  
  cursor.forEach(el => {
    el.style.left = `${x}px`;
    el.style.top = `${y}px`;
    
    links.forEach(link => {
      link.addEventListener("mouseenter", () => {
        el.classList.add("hover");
      })
      link.addEventListener("mouseleave", () => {
        el.classList.remove("hover");
      })
    })
    
  })
  
})

我试着把<a>换成<h1>，而不把它放在div中。但是如果某个东西在div中。它看不见。

你正在添加一个类到光标悬停，所以只使用类

.cursor.hover {
    transform: translate(-50%, -50%);
    height: 80px;
    width: 80px;
    transition: width 0.1s linear, height 0.1s linear;
}

或者你可以直接用CSS

const cursor = document.querySelector(".cursor");

window.addEventListener("mousemove", (e) => {

  /* 
    You have a bug... it does not account for scroll position
    You need to subtract scroll position because of the fixed
  */

  let x = e.pageX - window.scrollX;
  let y = e.pageY - window.scrollY;

  cursor.style.left = `${x}px`;
  cursor.style.top = `${y}px`;
});

.cursor{
    height: 40px;
    width: 40px;
    border-radius: 50%;
    position: fixed;
    transform: translate(-50%, -50%);
    pointer-events: none;
    background: #f0efe9;
    mix-blend-mode: difference;
}

body:has(a:hover) .cursor{
    transform: translate(-50%, -50%);
    height: 80px;
    width: 80px;
    transition: width 0.1s linear, height 0.1s linear;
}

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

<a href="#">FOOOOOOO</a>
<br/><br/><br/><br/>
<a href="#">FOOOOOOO</a>
<br/><br/><br/><br/>
<a href="#">FOOOOOOO</a>
<br/><br/><br/><br/>
<a href="#">FOOOOOOO</a>
<br/><br/><br/><br/>
<a href="#">FOOOOOOO</a>

html 更改我的投资组合网站的鼠标光标圆圈比例

1条答案

相关问题

热门标签

最新问答