CODEWITHSUNDEEP
javascriptcsshtmlcursor
Steven Lu
Steven Lu

Reputation: 43447

Override cursor with CSS

I have an overflow: hidden div which I am scrolling by allowing the user to click and drag the background. There are also links and buttons in this space.

This is what I do for the CSS: 

#div-grabscroll {    
    cursor: url(../img/openhand.cur), move;
}
#div-grabscroll:active {
   cursor: url(../img/closedhand.cur), n-resize;
}

This works great but what happens is that while dragging, if the mouse ends up moving (due to reaching scroll limits) over a button the pointer cursor overrides my closedhand cursor.

The desired behavior is that for the entire duration that the div is being controlled by the mouse, I want the cursor to remain the closedhand.

Is there a way to override the cursor without modifying CSS for everything that the mouse might move over? I tried !important on the :active style but that didn't do it.

Upvotes: 2

Views: 1696

Answers (2)

T.J. Crowder
T.J. Crowder

Reputation: 1074555

This is a very similar problem to creating "modal" dialog boxes, and it will probably have a similar solution: I think you'll have to create an iframe positioned over the content you're scrolling, making it higher up in the z-index order than the content, for the duration of the scroll. This is because on IE (at least) form controls tend not to obey z-index well, which is why "lightbox"-style things do this iframe shim thing.

Here's an answer I gave to another question here on SO which demonstrates the basics of the iframe shim. In that case it's for modal purposes, but the concept and most of the code would apply.

Upvotes: 1

Rick Donohoe
Rick Donohoe

Reputation: 7271

Answer / Question: What would happen if you had a duplicate div which sat on top of the grabscroll div, but which had no background or content of any type so as to not hide anything behind it, and then set the cursor hand on this.

Does z-index overwrite importance this way?

Does this make sense?

Effectively you have grabscroll - button - opaque grabscroll in that layered order.

Upvotes: 1

Related Questions