skip to Main Content

I’m working on a really simple little bit of CSS, where the cursor changes to a pointer when the mouse moves over it.

I’ve been looking at this code for hours, and I can’t figure out why the cursor will not change to a pointer. When I move over the div, it changes briefly and then changes back to arrow.

It’s probably something really simple, but I just cannot see it.

.holder{
    width:1000px;
    overflow: auto;
    margin: 0 auto;
    font-family: 'Abel';
    padding-left: 50px;
    padding-top: 50px;
    position: relative;
    }
.action_pod{
    float:left;
    border-radius: 10px;
    border: 1px solid #777;
    font-family: 'Abel';
    margin: 10px;
    overflow: hidden;
    padding:2px;
    cursor:pointer;
}
.act_pod{
    background-color: #cf9b63;
    color: #fff;
    width:100%;
    border-radius: 7px;
    padding-left: 3px;
    padding-right: 3px;
    font-size: 1em;
    text-align: center;
    cursor: pointer;
}
a:link{
    text-decoration: none;
    color:inherit;
    cursor: pointer;
}
a:visited{
    text-decoration: none;
    color:inherit;
    cursor:pointer;
}
<div class="holder">
    <div class="action_pod">
        <div class="act_pod">
            <a href="add_raw_season.php">add new raw season</a>
        </div>
    </div>
</div>

update: Thanks for all the suggestions. I’ve tried them all and so far nothing has worked. I’m wondering if there’s something hinky in my browser now…

update 2: Looks like its an error on my Mac somehow, as no links on any website make the cursor become a pointer. Surprised my question got marked down as I was only seeking help on an issue I was having and gave all the info I had as I went along.

update 3: Apparently it’s an issue with running Photoshop CC on Mac at the same time. Found the solution here if anyone has the same problem in the future. https://apple.stackexchange.com/questions/151370/my-cursor-is-wrong-in-certain-apps-safari-chrome-mail

5

Answers


  1. You should use

    divName:hover {
        cursor: pointer;
    }
    
    Login or Signup to reply.
  2. Add the CSS to the parent div

    holder:hover {
        cursor: pointer;
    }
    
    Login or Signup to reply.
  3. Remove all the cursor:pointer; bits you have right now in your code, and add this to your css:

    .act_pod:hover{
        cursor: pointer;
    }
    
    Login or Signup to reply.
  4. It’s really simple try this.

    body{cursor:default;}.holder a:hover{cursor:pointer;}
    
    Login or Signup to reply.
  5. Remove All Cursors In Other Div’s Classes
    And Add This Property In Your Class

    .holder:hover{
      ........
      cursor:pointer;
    }  
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search