CODEWITHSUNDEEP
htmlcss
Pri_stack
Pri_stack

Reputation: 189

how to show hand cursor on a button which is inside a div?

I have a button which is inside div 

.calculateActivityBtn {
    float: left;
    margin-right: 1px;
    cursor: pointer;
}

.pagination {
    display: inline-block;
    padding-left: 0;
    margin: 20px 0;
    border-radius: 4px;
    cursor: pointer
}
<div class="calculateActivityBtn">
    <div class="pagination centered">
        <div class="btn btn-primary" id="getFilesButton" title="<%= language['UI.reports.tooltip.getFilesButton'] %>"><i class="glyphicon glyphicon-stats">button text</i></div>
    </div>
</div>

when i hover on the div it gives me a hand cursor in chrome, but in firefox it does not show me a hand cursor till the pointer reaches the button icon .

I have tried changing z-index of the two div's and changing cursor:pointer in css.

I want a hand cursor when hovered on the div also in firefox.

Upvotes: 2

Views: 1827

Answers (2)

Super User
Super User

Reputation: 9642

Just use Padding instead of margin in pagination div.. check updated snippet...

.calculateActivityBtn {
    float: left;
    margin-right: 1px;
    cursor: pointer;
}

.pagination {
    display: inline-block;
    padding-left: 0;
    padding: 20px 0;
    border-radius: 4px;
    cursor: pointer;
    background: red;
}
<div class="calculateActivityBtn">
    <div class="pagination centered">
        <div class="btn btn-primary" id="getFilesButton" title="<%= language['UI.reports.tooltip.getFilesButton'] %>">
          <i class="glyphicon glyphicon-stats">button text</i>  
        </div>
    </div>
</div>

Upvotes: 1

NIKHIL CHANDRA ROY
NIKHIL CHANDRA ROY

Reputation: 1087

use this css 

.pagination:hover #getFilesButton{
cursor: pointer;
}

and be sure to support any specific browser for browser support about cursor you can check it here

Caniuse cursor supported

Hope, it will work. let me know if you need more help

Upvotes: 0

Related Questions