我正在尝试为每个导航项设置不同的光标，但它只是在 link 周围闪烁而不是完全显示

Question

我试图为每个导航项设置不同的光标，但它只是在 link 周围闪烁而不是完全显示。我对此很陌生，所以这可能是一个相当明显和基本的问题。

HTML:

  <nav>
    <div class="one">
      <a href="index.html">Home</a>
    </div>
    <div class="two">
      <a href="resume.html">Resume</a>
    </div>
    <div class="three">
      <a href="contact.html">Contact</a>
    </div>
   
  </nav>

CSS

nav {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  padding: 140px 0  0px 400px;
}

a {
  padding: 0 40px 40px 0;
    text-decoration: none;
color: #ff0000;
}

a:hover{
  color: #ffffff;
  transition-duration: 0.3s;
  text-decoration: none;
}
.one{
    cursor: url('cursor1.png'), auto;
}

.two{
    cursor: url('cursor2.png'), auto;
}

.three{
      cursor: url('cursor3.png'), auto; 
}

Answer 1

为了在导航项中看到鼠标悬停时光标的变化，您需要做几件事：

您需要在每个导航项中添加hover伪类，如下所示：

.one:hover{
    cursor: url('cursor1.png'), auto;
}

.two:hover{
    cursor: url('cursor2.png'), auto;
}

.three:hover{
    cursor: url('cursor3.png'), auto; 
}

您需要通过在 a:hover 规则中使用 cursor:inherit; 让每个 link 从父级继承游标。
这是可选的，但为了清楚地看到结果，您可以从 a 中删除所有填充并在导航项中添加填充：
```
.one, .two, .three {
   padding: 20px;
}
```

我假设您希望在悬停在 div 标签上时看到光标发生变化，而不仅仅是 a 标签。

我正在尝试为每个导航项设置不同的光标，但它只是在 link 周围闪烁而不是完全显示

I am trying to get a different cursor for each nav item, but it's only flickering around the link vs. showing up fully

html

css

cursor