user6447029
user6447029

Reputation:

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?

Upvotes: 0

Views: 36

Answers (2)

Head In Cloud
Head In Cloud

Reputation: 2051

Put cursor: pointer; on .btn class

.btn{  cursor: pointer;}

Upvotes: 0

Simon
Simon

Reputation: 794

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/.

Upvotes: 1

Related Questions