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

Question

I am trying to get a different cursor for each nav item, but it's only flickering around the link vs. showing up fully. I am very new to this, so it may be a fairly obvious and rudimentary issue.

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

In order to see the cursor changing on hover in the nav items, you need to do a couple of things:

1. You need to add the hover pseudoclass in each nav item as follows:

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

2. You need to have each link inheriting the cursor from the parent by using cursor:inherit; in the a:hover rule.

3. This is optional but in order to see the result clearly, you could remove all padding from the a and add padding in the nav items:

   .one, .two, .three {
      padding: 20px;
   }
   

I assume that you want to see the cursor changing when hovering on the div tag and not just the a tags.