Search code examples
csshovercursor

Having trobule getting a cursor to appear when I hover over a button

I created this HTML

<span class="buttonContainer"><input type="submit" name="commit" value="Save" method="put" class="btn"></span>

and wanted a cursor (pointer) to appear when I roll over it. So I added this CSS

.buttonContainer {
    margin: 0 0 15px 0;
    text-rendering: optimizeLegibility;
    cursor: pointer;
}

but no pointer appears when I hover above the button. I created this JS fiddle to illustrate the problem — https://jsfiddle.net/pj528mqo/2/ .

Any ideas how to get a cursor to appear when I hover above the button in question?

Solution

  • The button inside the container is the same size and doesn't show a cursor on hover. You could add this rule to make all elements inside the container to show a cursor on hover:

    .buttonContainer *:hover {
    cursor: pointer;
}

    Working example: https://jsfiddle.net/49noydup/.